angularjs - md-slider is not working with ng-repeat? -

i unable data on slider ng-repeat on md-slider

i getting gaps slider if used ng-repeat , unable see values top on it.

any appreciated.

$scope.data =  [  {      id: 1,      value: "1"  },  {      id: 2,      value: "2"  },  {      id: 3,      value: "3"  }    ]  console.log($scope.data);    $scope.clicked = function (id) {          alert(id);    };

<md-slider-container>        <md-slider flex ng-model="value" ng-repeat="aa in data" aria-         label="blue" id="blue-slider" class="md-primary">              {{aa.value}}         </md-slider>         <md-input-container>              <input flex type="number" ng-model="value" aria-label="blue"                  aria-controls="blue-slider">          </md-input-container>      </md-slider-container>      <md-button class="md-raised md-primary" ng-click=clicked(value)>get       value</md-button>

you using wrong markup. try this:

 <md-content>       <md-slider-container ng-repeat="aa in data">       <span>{{aa.value }}</span>       <md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">       </md-slider>       <md-input-container>         <input flex type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider">       </md-input-container>     </md-slider-container>     </md-content>