angularjs - selected item won't display -

all want show selected item below master list o' items. i've done before, reason it's not behaving , can't figure out i'm missing.

the html (trimmed down relevant part):

<ul>     <li data-ng-repeat="user in users" ng-click="$parent.selectuser($index)" ng-model="$index">         {{user.username}}     </li> </ul>  <p>selected: {{selected.username}}, #<b>{{$index}}</b></p> 

the js:

(function (app) {     app.controller('userscontroller', [ '$scope', function ($scope) {         $scope.selectuser = function ($index) {             $scope.selected = $index;             console.info('selected1=' + $index);         };         $scope.selected = null;     }]); }); 

the console log shows index of selection, nothing happens in last line of html -- no selected.username, no $index. i've tried kinds of variations , nothing happens. missing? in advance!

(note: i'm not sure i'm using ng-model there correctly, either, seems incidental whether or not can selected $index show up.)

you trying use $index outside ng-repeat not work, $index available inside ng-repeat context.

since setting

$scope.selected = $index;

you need use selected variable

i think want select user on clicking. should done this.

<ul>     <li data-ng-repeat="user in users" ng-click="selectuser(user,$index)" ng-model="$index">         {{user.username}}     </li> </ul>  <p>selected: {{selected.username}}, #<b>{{index}}</b></p> 

your controller have

$scope.selectuser = function (user,index) {             $scope.selected = user;             $scope.index=index;         };