AngularJS and AJAX filtering / refreshing tutorial, AngularJS Init Data from AJAX tutorial

I decided to start my oen AngularJS tutorials, so i'll put some data for google to mattch:
Bresleveloper's AngularJS tutorial: Controllers :)

i should put this on utube but for now...
I also don't care about the double title, as long as ppl will find it cuz that's the queries I put in google and got nit.

OK so u want to build an awesome app with the awesome new thing (it has many names) called AngularJS.
maybe u've seen this great tutorial: http://www.youtube.com/watch?v=i9MHigUZKEM
u see all the tutorials and make something like this:
<div ng-app="myApp">
  <div ng-view><div>
</div>

and did a nice view with ng-repeat and u want to give it a kick so u do:
var myModule = angular.module('myModule', []);

myModule.config(function ($routeProvider) {
  $routeProvider.when('/', { controller: 'myController', templateUrl: '/View1.html' })
    .when('/View2', { controller: 'myController', templateUrl: '/View2.html' })
    .otherwise({ redirectTo: '/' });
});

function myController($scope, $http) {
  console.log("myController ctor");
  var url = "/myHandler.ashx";
  var getMyList = function(filter){
    if (filter)
      url += "?filter=" + filter;
    $http.get(url, { cache: true }).success(function(data [, ...]) {
      $scope.myList = data;
    });
  };

  $scope.itemClick = function (item) {
    getMyList(item.someFilteringKeyValue);
  };

  getMyList();
}
 
myModule.controller("myController", myController);

the results will surprise u:
1. the initial call to the page will work
2. when u try to refresh or filter its a mess.

in my case I even had a "global" variable cuz I have another filter value of level since my data was spread to  7 levels.

the reason to all this mess is that every time the controller is called for something it gets re-instance.
a CONTROLLER IS A BEHAVIOR MANAGER, not a data manager and one of its features is that its being created every time the app needs it so if ur ajaxing the success is a callback method so it call again the controller so AngularJS Controller execute twice every click.

and if u have some data initialized in the controller it gets overridden every time.

so... how do u manage data?
DATA MANAGER IS A SERVICE or FACTORY or PROVIDER and for us commoners its the same so i'll use a factory, and u need ur javascript to look like this:
var myModule = angular.module('myModule', []);

myModule.factory('myFactory', function ($http) {
  var factory = [];
  factory.myLevelFilter = 1;
  factory.filter;
  factory.getData = function () {
    var url = "/myHandler.ashx?myLevelFilter" + factory.myLevelFilter;
    if (factory.filter)
      url += "&filter=" + factory.filter;
    return $http.get(url, { cache: true });
  };

  factory.change = function (level, filter) {
    factory.myLevelFilter = level; 
    factory.filter = filter;
  };
  return factory;
});

myModule.config(function ($routeProvider) {
  $routeProvider.when('/', { controller: 'myController', templateUrl: '/View1.html' })
      .when('/View2', { controller: 'myController', templateUrl: '/View2.html' })
      .otherwise({ redirectTo: '/' });
});

function myController($scope, myFactory) {
  console.log("myController ctor");
  $scope.itemClick = function (item) {
    myFactory.change(++myFactory.myLevelFilter, item.filterField);
  };
 
  myFactory.getData().then(function (response) {
    $scope.myList = response.data;
  });
}

myModule.controller("myController", myController);

as u can see the point is to supremely completely abstract the controller from managing and/or manipulating data.

GL & HF !