In the latest version of AngularJS (1.2.0+) there seem to have been a change which will probably break most apps which have in the past relied on the view unwrapping the promise object and showing the results directly in the view.

After searching online and not being able to find any fix for my issue, I resorted to Twitter as it seems like I normally get quicker results on Twitter than I do searching Google when it’s AngularJS related.

After a few minutes of my tweet I got a reply from @ithinkdancan pointing me to a Stack Overflow question he had asked and got the answer to.

This is not as prominent in the changelog as I would expect it to be, seeing that this is one of the features that was talked about a lot in previous versions of AngularJS.

There are two ways to fix this issue according to the Stack Overflow link. You can either turn the feature back on by using

$parseProvider.unwrapPromises(true);

This is only recommended for short term fix as this feature is actually deprecated. If it is not clear where you would set this, I have written in example 1 below showing how this would be called.

Example 1

var app = angular.module('Application', []);
app.config(function ($parseProvider) {
	$parseProvider.unwrapPromises(true);
});

You can see the full code below.

var app = angular.module('Application', []);
app.config(function ($parseProvider) {
  $parseProvider.unwrapPromises(true);
});

app.factory('DataFactory', function ($q, $timeout) {
  var deferred = $q.defer();
  var data = [
    {
      id: 1,
      name: 'Test',
      day: 2
    },
    {
      id: 2,
      name: 'Rest',
      day: 4
    },
    {
      id: 3,
      name: 'Pest',
      day: 3
    }
  ];
  
  return {
    getData: function () {
      $timeout(function() {
        deferred.resolve(data);
      }, 1000);
      
      return deferred.promise;
    }
  };
});

app.controller('RepeatController', function ($scope, DataFactory) {
  $scope.weeks = DataFactory.getData();
});

View Demo

The recommended way of handling this is to unwrap your promise inside of your controller and pass the unwrapped data to your view, this can be done using the .then() method of the promise object.

Example 2

app.controller('RepeatController', function ($scope, DataFactory) {
		DataFactory.getData().then(function (data) {
  			$scope.weeks = data;
		});
});

You can see full code below.

var app = angular.module('Application', []);

app.factory('DataFactory', function ($q, $timeout) {
  var deferred = $q.defer();
  var data = [
    {
      id: 1,
      name: 'Test',
      day: 2
    },
    {
      id: 2,
      name: 'Rest',
      day: 4
    },
    {
      id: 3,
      name: 'Pest',
      day: 3
    }
  ];
  
  return {
    getData: function () {
      $timeout(function() {
        deferred.resolve(data);
      }, 1000);
      
      return deferred.promise;
    }
  };
});

app.controller('RepeatController', function ($scope, DataFactory) {
  DataFactory.getData().then(function (data) {
    $scope.weeks = data;
  });
});

View Demo

Hope this will be of help to others and also serves as a reminder for myself.