How to get Angular to update the Ui from within the controller

Question

How to get Angular to update the Ui from within the controller

I have the following html.

<div ng-controller="CustCtrl">
<table class="table table-condensed">
    <thead>
        etc.
    </thead>
    <tbody>
        <tr ng-repeat="customer in customers" data-cust-id="{{customer.Id}}">
            <td>
              <button ng-model="Id" tracking-{{customer.Tracking}} ng-click="startTrackingCustById(customer.Id)">
              </button>
            </td>
         etc.
        </tr>
    </tbody>
</table>

So the button has a class that is databound to the customer.Tracking value which is either true or false. When the button is clicked the startTrackingCustById() method is successfully called and the customer object in the customers object is successfully changed like customer.Tracking = true.

But the buttons class is not updated. What am I missing?

angularjs

Answer 1

Look at using ng-class . For a boolean value in scope you would use:

ng-class="{'classNameToAddIfTrue':customer.Tracking}"

Answer 2

In the CustCtrl I wrapped the call that updated the customers array like this

$scope.$apply($scope.customers[i].Tracking = true);

Based on the suggestion in an answer I will link to when I find it that basically said "If you are having trouble updating the view you most likely need to use $scope.$apply

So that get's it to work. Now I need to figure out why and how.