When I update the data in the variable $scope.userMovies, ng-repeat does not update if inside a ng-view. Outside ng-view it gets updated correctly.
What am I missing that ng-repeat does not work as I expect?
UPDATE: As requested I moved the code to Plunker to better undestand my problem: Plunker Code Example
UPDATE: Solved saving the variable userMovies in the rootScope.
ng-view creates its own scope. What is likely happening is that you are creating $scope property userMovies on this ng-view child scope, which your MovieboxCtrl scope can not see/access. As @darkporter alluded to in a comment, your MovieboxCtrl should create an empty userMovies array. Then when the MovieCtrl sets userMovies, it will update the existing object reference, rather than create a new property.
Here is a plunker that stores the data in the service, rather than in a controller.
angular.module('moviebox.services', [])
.factory('movieboxApi', function() {
var model = { movies: [] };
model.getMoviesByTitle = function(query) {
angular.copy([{'title': 'foo'},{'title': 'foo1'},
{'title': 'foo2'},{'title': 'foo3'},
{'title': 'foo4'}], model.movies);
};
return model;
});
app.controller('MainCtrl', function($scope, movieboxApi) {
$scope.getMoviesByTitle = function() {
movieboxApi.getMoviesByTitle($scope.query);
};
$scope.userMovies = movieboxApi.movies;
});
app.controller('MovieboxCtrl', function ($scope, movieboxApi) {
$scope.userMovies = movieboxApi.movies;
});
HTML change:
<body ng-controller="MainCtrl">
angular.copy() is used because the controllers have a reference to the model.movies array that the service initially created. We want to modify that array, not assign a new one.
getMoviesByTitlecall happens?