Maximum call stack size exceeded using angular ng-view - angularjs

Question

I want to redirect after login to /dashboard
$scope.submit = function (user) {
if ($scope.loginForm.$valid) {
UserService.login(user).then(
function (result) {
$location.path('/dashboard');
}, function (reason) {
$scope.msg = "username or password is not correct";
});
$scope.reset();
}
};
in app.js I want to create my menu dynamically and show dashboard.html
$routeProvider
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
abstract:true,
resolve: {
menu: function (MenuService) {
return MenuService.getMenu();
}
},
controller: function ($scope, menu) {
$scope.menu = menu;
$scope.oneAtATime = true;
}
})
and in dashboard I use ng-view to load my template
<div class="content">
<div class="container">
<ng-view></ng-view>
</div>
but it catch "Maximum call stack size exceeded" error.
THE MenuService servie return promise
factory('MenuService', function ($q, $http) {
var getMenu = function () {
var deferred = $q.defer();
$http.post('/menu', 1).
success(function (data) {
deferred.resolve(data);
}).
error(function (data, status) {
deferred.reject(status);
});
return deferred.promise;
};
return{
getMenu: getMenu
}
})
I changed the MenuService.getMenu() to this:
$routeProvider
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
abstract:true,
resolve: {
menu: function (MenuService) {
MenuService.getMenu().then(function(result){
return result;
});
}
},
controller: function ($scope, menu) {
$scope.menu = menu;
$scope.oneAtATime = true;
}
})
and now dashboard is loaded but without menu. then method is called after dashboard.html loading!!!!
when I remove ng-view every thing work perfectly.
What is my problem?
thank you

Answer 1

Basically you need to do change in your custom resolve service code. Currently your controller promise has receiving chain promise, so you should return a promise instead of return chain promise.
Code
$routeProvider
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
abstract:true,
resolve: {
menu: function (MenuService) {
return MenuService.getMenu();
}
},
controller: function ($scope, menu) {
menu.then(function(data){
$scope.menu = data;
});
$scope.oneAtATime = true;
}
})