Angular 1.4 – How to move logic for ng-click item from template to controller?

Issue

I am looking to modify some code to add more functionality to an ng-click event that is within an ng-repeat.

The current code updates the selected property for the item in the list:

<li ng-repeat="value in facet.values" ng-click="value.selected = (value.selected == 0) ? 1 : 0; accountSearch()">
  ...
</li>

I’d like to update the selected property but also fire an event to our analytics provider:

<li ng-repeat="value in facet.values" ng-click="itemClicked(value)">
  ...
</li>

Then in my controller:

$scope.itemClicked = function(value){
  value.selected = (value.selected == 0) ? 1 : 0; $scope.accountSearch();
  // do other things
}

The issue is that the above code will not actually modify the selected property in the template. How can I recreate this behavior but move the logic to the controller?

Solution

Value is not returned to the template, so it’s lost. Try the following:

<li ng-repeat="value in facet.values" ng-click="itemClicked($index)">
  ...
</li>


$scope.itemClicked = function(index){
  $scope.facet.values[index].selected = ($scope.facet.values[index].selected == 0) ? 1 : 0; 
  $scope.accountSearch();
}

Answered By – Vega

Answer Checked By – Timothy Miller (AngularFixing Admin)