Angular ng-repeat scope

Need to know that angular ng-repeat directive actually create child scope for each element.
so if you want reference the parent $scope value need to use $parent

<span ng-show="item.name == currentDbName"><input type="text" name="newDbValue" ng-model="$parent.newDbValue" />{{$parent.newDbValue}}</span>

Or else if you want to update the repeating item value, you need to use $index

<div ng-repeat="name in dbnames track by $index">
        <input type="text" ng-model="dbnames[$index]" />
</div>

the "track by $index" is new since Angular1.2 to make sure the text box won't lose focus for each key stroke

Angular test primer in Jasmine

To test angular controller in Jasmine, need to use the angular mocks to inject module and controller
Then in the controllerSpec test js file, we can inject the controller and scope

describe('expense controller', function () {

var $controllerTestConstructor;
var scope;

beforeEach(module('app'));

beforeEach(inject(function($controller, $rootScope){



$controllerTestConstructor = $controller;

scope = $rootScope;

}));
  it('should have three expense item', function () {
var ctrl = $controllerTestConstructor('expenseController', { $scope: scope });

expect(ctrl.expenseItems.length).toBe(3);

});

}); 

Angular module dependency injection

Angular provides the module functions to do the service injection. In this way, we can build our own service functions and inject into the controller to load it.

We can set up the module first, then call the app.js to set up the both module together, this is the example shows in the angular tutorial site.
https://docs.angularjs.org/tutorial/step_11

Here is the example for this way, there is a controller and it depends on the dataService to load the data. Each angular.module call is in its own js file.

angular.module('app', ['services', 'controllers']);

angular.module('services', [])
        .factory('expenseDataService', ['$http', expenseDataService]);

angular.module('controllers', [])
        .controller('expenseController', ['expenseDataService', expenseController]);

Also there is a simplified version. But you need to put app.js at first in the html page. In this way, all the dependency are created in the app module directly.
angular.module('app', []);

angular.module('app')
        .factory('expenseDataService', ['$http', expenseDataService]);

angular.module('app')
        .controller('expenseController', ['expenseDataService', expenseController]);

The full file is attached as a zip file.expense_app.zip

Rebind AngularJS in ajax call

Just a quick tip when I am trying to working on the angular with jquery ajax.

After the data is assigned in an ajax call back function, angular won't be able to monitor change,
in this case, $scope.$apply() will be needed to reflect data binding.