Angularjs with two same directive on the same page

ionic-v1
1

I am very new to angularjs, So sorry for my ignorance

I was searching on internet some dropdown and I found fancy select dropdown, which I like very much but it was not having search facility within it. So I started putting textbox for search and make it working

My codepen codes link http://goo.gl/75lTSQ

Now I am trying to put same tag two times like below

<ion-view>
  <ion-content>
    <fancy-select header-text="Single" allow-empty='false' value="val.single" text="countries_text_single" items="countries">
    </fancy-select>
    <fancy-select header-text="Single" allow-empty='false' value="val.single" text="countries_text_single" items="countries">
    </fancy-select>
  </ion-content>
</ion-view>

but what happens if select in first control then it will select for second control and vice verse. How can I make act independently

2

Any help on this will be appreciated.

3

I think that you are having that problem because the two selects are binding to the exact same expression in the value attribute. You should use different expressions if you want them to have different selected values.
For exemple value=“val.first” on the first and value=“val.second” on the second.

I don’t have that much experience in angular… but that seems to be the issue.

cumps :wink:

Edit: It appears that the text attribute should also be bound to a different expression to appear in the interface with a different value.

4

Sorry it did not help me out

5

Check this: http://codepen.io/anon/pen/ogBbWQ?editors=101

The two select are acting independently.
Be careful that the code is not great, just wanted to demonstrate how you can make the two selects to act independently.

6

Thank you very much. That’s works, I will try to make code proper