use ng-model in <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 am clicking in 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 that this is not correct way and 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>