Data returned from a promise within a service not updating scope property from controller

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
  <div ng-controller="ctrl">
    <div ng-repeat="item in list">
      {{ item._id }}
    </div>
  </div>
</div>

JavaScript

angular.module('app', [])
  .controller('ctrl', function($scope, ServeMe, $timeout) {
    // controller property must be defined in advance
    $scope.list = [{
      _id: 20934
    }, {
      _id: '230498'
    }];
    var s = $scope.s = new ServeMe();
    s.setArray($scope.list);

    s.changeArray();
  })
  .service('ServeMe', function($timeout, $q) {
    var ServeMe = function() {};

    ServeMe.prototype = {
      setArray: function(arr) {
        this.list = arr ? arr : [];
      },
      changeArray: function() {
        var self = this;
        var deferred = $q.defer();

        $timeout(function() {
          deferred.resolve([{
            _id: 'new item1'
          }, {
            _id: 'new item2'
          }]);
        }, 2500);

        deferred.promise.then(function(data) {
          console.log('returned data from promise: ', data);
          self.list = data;
        });
      }
    }

    return ServeMe;
  })