Scope & Variable Output In AngularJS

My quest: a page of sliders, made with an ng-repeat through a JSON file. Spans showing the value of each slider. An input showing (value of the slider * a grams value per selected

Solution 1:

I am not quite sure what you actually tried to do to solve this (what do you mean by "by assigning a unique identifier to the ng-model & ng-bind of each slider & its output"?), but if you want separate values for each food slider, it should also be an element of the food object as it belong to this object in nature.

Instead of using demoVals.slider use e.g. food.slider. You can also initialize this using ng-init, i.e. ng-init="food.slider=0;"

I updated the Plunkr: http://plnkr.co/edit/CbkSZpzoqXwcMkV1EDdp?p=preview

However, it seems like a good idea to separate all this into its own food controller. This way you could process each food item in its own scope.