SO - Deep Watch on Single Property

by Jeremy Likness

HTML

<div ng-app="myApp" ng-controller="myController">
    <button ng-click="change(true)">Set True</button>
    <button ng-click="change(false)">Set False</button>{{status}}</div>

JavaScript

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.status = "Nothing happened.";
    $scope.data = [{
        "active": true,
            "id": "4bcb19db-ec10-4de5-8ae6-b13388494651",
            "name": "Owais Shah",
            "username": "chekhov"
    }, {
        "active": false,
            "id": "630d0582-1bf9-4331-9fa6-f6baa59319b2",
            "name": "Tim Hunt",
            "username": "one"
    }];
    $scope.changes = 0;
    $scope.change = function (value) {
        $scope.data[1].active = value;
    };
    $scope.$watch(function () {
        var value = 0,
            idx;
        for (idx = 0; idx < $scope.data.length; idx += 1) {
            value *= 2;
            value += $scope.data[idx].active ? 1 : 0;
        }
        return value;
    }, function () {
        $scope.changes += 1;
        $scope.status = "Changed " + $scope.changes + " times.";
    });
});