Angular $scope asyn model change

by rgthree

HTML

<div ng-controller="Ctlr1">
    <ul>
        <li ng-repeat="entry in entries">
            <section person-entry entry="entry"></section>
        </li>
    </ul>
</div>

CSS

hr {border:1px dotted #999; border-width:1px 0px 0px;}
li {
    padding:10px;
    border-bottom: 1px solid #999;
}

JavaScript

angular.module('app', []).controller('Ctlr1', function($scope, PersonService) {
    PersonService.getPersons().then(function(persons) {
        $scope.entries = persons;
    });
    
}).factory('PersonService', function($q) {
    var people = [
        {id:0, name: 'Fred', sex: 'Male'},
        {id:1, name: 'Jill', sex: 'Female'},
        {id:2, name: 'Pete', sex: 'Male'},
        {id:3, name: 'Julie', sex: 'Female'}
    ];
    return {
        getPersons: function() {
            var deferred = $q.defer();
            setTimeout(function() {
                deferred.resolve(people);
            }, 1000);
            return deferred.promise;
        },
        setClicked: function(index, clicked) {
            var deferred = $q.defer();
            setTimeout(function(){
                console.log('setTimeout');
                people[index].clicked = true;
                deferred.resolve(people[index]);
            }, 1000);
            return deferred.promise;
        }
    };
}).directive('personEntry', function(PersonService) {
    return {
        restrict: 'EA',
        scope: {
            person: '=entry'
        },
        template: '<div ng-click="onClick($event)">name: {{person.name}}<br>sex: {{person.sex}}<br>clicked: {{person.clicked}}</div>',
        link: function($scope, $element, $attrs) {
            console.log($scope);
            $scope.onClick = function(event, item) {
                console.log('clicked!');
                PersonService.setClicked($scope.person.id, true);
            };
        }
    };
        
});

angular.bootstrap(document, ['app']);