Which parts does two way binding updates?

Question

Assume I have the following array in the controller with SortBy model.

var empsColl = [
        { 'firstName': 'Donney', 'gender': 'male', DOB:new Date("November 20, 1978"), salary1:12000, salary2:12000 },
        { 'firstName': 'Obama', 'gender': 'male', DOB: new Date("April 10, 1980"), salary1: 40000, salary2: 40000 },
        { 'firstName': 'Jeb', 'gender': 'male', DOB: new Date("May 20, 1990"), salary1: 120000, salary2: 120000 },
        { 'firstName': 'Xing', 'gender': 'male', DOB: new Date("May 3, 1990"), salary1: 12, salary2: 12 },
        { 'firstName': 'Dillon', 'gender': 'male', DOB: new Date("May 3, 1990"), salary1: 6000, salary2: 6000 }
    ];
    $scope.Employees = empsColl;
    $scope.SortBy = 'firstName';

in the view I have used two-way binding in two places one in <select ng-model="SortBy"> and in an expression binding in <div>{{SortBy}}</div>

I definitely know that model update updates the expression binding part but does it re-updates the selected option in <select>?

Answer 1

Behind the scene what happen is, angular collect all the view level bindings, binding directives, ng-model's, $watch expression, etc. and it put it inside $scope's $$watchers object. Which has all the watchers array.

When Angular run's up a digest cycle for updating binding, it re-evaluate each watcher expression(on each digest cycle) by applying dirty checking on model. If model newValue !== oldValue then only it update a binding. Otherwise updation gets skipped.