Why my $scope attributes keep resetting in my AngularJS application?

Question

I have the following AngularJS application composed of a template (index.html), an app definition (app.js), a controller definition (controll

Answer 1

You should use services (or $rootScope) to store the information you want to persist. Services are singletons and you can inject them in the controllers, anything you set there will persist in your application.

$scopes are deleted when you change the route so they won't persist.

Here is an example:

var myApp = angular.module('myApp',[]);
myApp.factory('SomeService', function() {
  return {
      myAttribute : '12345'
  };
});

var MyController=['$scope','$http','$location', 'myService', 'SomeService',function ($scope, $http, $location, myService, SomeService) {
   //do some fancy stuff
   SomeService.myAttribute; //this is how you access myAttribute
}];

Also I'd create a function inside the service to fetch the values you want via AJAX (instead of having it inside you controller), so the service would be something like:

myApp.factory('SomeService', function() {

    var SomeService = {};

    var myAttribute;

    SomeService.getMyAttribute = function () {

         if(!myAttribute) {

            //run ajax request then populate and return myAttribute

         }
         return myAttribute;
    };
    return SomeService;
});