angularjs - dynamic orderBy not working with ng-model -

i'm having trouble getting list ordered based on selected value. considered better practice this?

<select ng-model='selected'>             <option value="name">name</option>             <option value="score">score</option>  </select>  <ul ng-repeat="shop in shops track $index | orderby: 'data.{{selected}}' ">              <li class="name">{{shop.data.name}}</li>             <li class="score">score: {{shop.data.score}}</li>             <li><img  ng-src="{{shop.data.img}}"> </li>  </ul> 

here have tried.

html :

<select ng-model="selected">              <option value="name">name</option>             <option value="score">score</option>          </select>          <ul ng-repeat="shop in shops | orderby:selected">          <li class="name">{{shop.name}}</li>         <li class="score">score: {{shop.score}}</li>          </ul> 

js :

$scope.shops= [     {name : "a",score : 13},                         {name : "b",score : 11},                         {name : "c",score : 12},                         {name : "a",score : 11},                         {name : "b",score : 12},                         {name : "c",score : 11}                      ]; 

i think should remove track by our ng-repeat.

edit :

your ng-repeat should this

<ul ng-repeat="shop in shops | orderby: selected "> 

please refer plunker

please refer fiddle