Watch attribute-values of multiple elements without directive?

Question

Given the following:

<div ng-app="interactive">  
    <main ng-controller="RecipesController">
        <ul>
            <li ng-repeat="option in options">
                <ul decisionIndex="{{ value }}">
                    <li>Edit {{ option.name }}</li>
                    <li>Choose {{ option.name }}</li>
                    <li>Delete {{ option.name }}</li>
                </ul>
            </li>
        </ul>
    </main>
</div>

How can I use $watch to detect whether "value" (is either 0, 1 or 2) changes?

Do I need to use $watchGroup ? As far as I know that only works if you have multiple attributes which are not the same.

I found this working with directives and isolated scopes, but it does not quite match my case and I would prefer not using directives.
Is it possible using isolated scopes without directives? Or how can I watch for changes of an attribute-value occuring multiple times?

EDIT:
This is how I tried using $watch

app.controller('RecipesController', ['$scope', function ($scope) {
    $scope.$watch('value', function () {
        console.log('value: ' + $scope.value);
    });
}]);

the value gets set outside of my control. If I try using `$watch` it works only when using one option. E.g I could not have multiple options to choose from. — Slotty Bon, Oct 25 '15 at 20:16
We need to see more of your code. Is value an object? An array? etc — Anid Monsur, Oct 25 '15 at 20:18
value is a number between 0 and 2 indicating what decision has been made. (0 for Edit, 1 for Choose and 2 for Delete) — Slotty Bon, Oct 25 '15 at 20:21
can you provide a fiddle ? Can you add a ng-controller and watch the values from there? — Gonzalo.-, Oct 25 '15 at 20:26

score 0 · Accepted Answer · answered Oct 25 '15 at 20:32

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="value">
    <p>Current value is: {{value}}</p>
    <ul>
        <li ng-repeat="option in options">
            <ul decisionIndex="{{value}}">
                <li ng-click="setValue(0)">Edit {{option.name}}</li>
                <li ng-click="setValue(1)">Choose {{option.name}}</li>
                <li ng-click="setValue(2)">Delete {{option.name}}</li>
            </ul>
        </li>
    </ul>
</div>

Controller:

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.value = 0; //Set initial value, or just declare it;
    $scope.options = [
        {name: "Bob"},
    ];
    $scope.setValue = function(a){
        $scope.value = a;
    }
    $scope.$watch('value', function(newVal, oldVal){
        console.log(newVal);
    })
  }]);

wow, now it works. Hope that was a typo. Thank you, it works now! — Slotty Bon, Oct 25 '15 at 20:40

Watch attribute-values of multiple elements without directive?

1 Answers1