javascript - Multiple ng-init scope issues -

I use ng-init to change my data and use ng-init to reuse the same component Trying

The component code ("slider.html", which does not have a controller) looks like this:

  & lt; Div ng-repeat = "person in person" & gt; {{Person.name}} & lt; / Div & gt;  

From the main view, I want to change the same component to the "Individuals" list so that I have this view:

  & lt ;! - Slider # 1 - & gt; & Lt; Div ng-init = "persons = english" ng-include "" inc / app / views / widgets / slider.html "& gt; / div> & lt;! - slider # 2 - & gt; ; & Lt; div ng-init = "person = german" ng-inclusion = "'inc / app / views / widgets / slider.html' & gt; & Lt; / Div & gt;  

And in the controller I start 2 lists like "english" and "german":

  $ scope.english = records.filter ( Function (t) {return t.nationality == "english";}); $ Scope.german = records.filter (function (t) {return t.nationality == "german";});  

What happens is that the 2 components show the same list of data (German); Is there any way to bind 2 different sets in components?

Here (after both lists are set) as in German), because in the end, You are using only one controller, in which there is only one scope in which person varaiable is present when AngularJS starts its bootstrapping process, then it English To update the variable, first processes the ng-init. Then it processes the second ng-init, is updating the same person variable to German . Then, when NG-repeat is sung, it will take the current and unique person variable data, so, everything in German is happening.

What you can do is independent controller per component (slider.html), so each controller will have its own binding variable so that you can create a person variable for each and every controller's variable can be used on its ng Can be started independently with a Direct Directive. Example:

  & lt; Div ng-controller = "MySubController" ng-repeat = "person in person" & gt; {{Person.name}} & lt; / Div & gt;  

...

  & lt ;! - Slider # 1 - & gt; & Lt; Div ng-init = "initMySubController (English)" ng-inclusion = "'inc / app / views / widgets / slider.html' & gt; & lt; / div & gt; & lt;! - slider # 2 - & Gt; & lt; div ng-init = "initMySubController (German)" ng-inclusion = "'inc / app / view / widget / slider.html' & gt; & Lt; / Div & gt;  

In a JS file:

  var myApp = angular.module ('myApp', []); MyApp.controller ('MySubController', ['$ scope', function ($ radius) {$ scope.persons = []; $ scope.initMySubController = function (personsData) {$ scope.persons = personsData;}}]))) ;