Use the ng model in the <ul> list generated by ng-repeat

Question

I am trying to add ng-model to each <li> in my <ul> , so I can show the <li> label that I click on my list.

 <ul ng-repeat="prop in props" class={{prop.selected}} ng-click="setSelected(prop )" ng-model="selectedpropName"> <li ng-cloak >{{prop.label}}</li> </ul> My Selected Property: {{selectedpropName}} 

I know this is the wrong way and the angular way to do it. What is the right way? Please, help

Answer 1

Something like this should work for you:

 function test($scope) { $scope.setSelected = function(prop){$scope.selectedprop = prop; }; $scope.props = [{label: "Aaaaaa"},{label: "Bbbbbb"},{label: "Cccccc"}]; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <style>li.selected {text-decoration: underline;}</style> <div ng-app="" ng-controller="test"> <ul> <li ng-repeat="prop in props" ng-click="setSelected(prop)" ng-class="{selected: prop == selectedprop}" ng-cloak="">{{prop.label}}</li> </ul> My Selected Property: {{selectedprop.label}} </div> 

Answer 2

ng-model binds to the prop field, not the label field, so you are probably using something like this:

 My Selected Property: {{selectedpropName.label}}