semantic UI dropdown not working with ng-repeat angularJS

Question

Please see the plunker: https://plnkr.co/edit/YeOJjf6AZyJ7hAfpFfsK?p=preview

In the Plunker, you could see that the color dropdown is working fine but the shape dropdown is not. I am guessing this is because I use ng-repeat for the shape.

The color html is

<select class="ui dropdown">
  <option>1</option>
  <option>2</option>
</select>

while the shape html is

<select class="ui dropdown">
  <option ng-repeat="test in tests" value="{{test}}">{{test}}</option>
</select>

I cannot find any mistake in the code. How to make dropdown work with the ng-repeat?

Please go the above Plunker link for more details. Thanks.

------- UPDATE

I've got it worked by moving

$(".ui.dropdown").dropdown();

from app.js controller to index.html <script></script>. See Plunker, https://plnkr.co/edit/NIZ20VKFYb2QfKyr91Lz?p=preview.

But still, I don't understand why $(".ui.dropdown").dropdown(); within controller doesn't work. Thanks.

Answer 1

It appears to be the way Semantic renders stuff. I found this workaround on another post

<div class="field">
  <label for="Role">Role</label>
    <div class="ui selection dropdown">
      <div class="default text">{{test}}</div>
        <i class="dropdown icon"></i>
          <div class="menu">
            <div ng-repeat="test in tests" class="item" ng-click="setTest(test)">{{test}}</div>
        </div>
    </div>
</div>

https://plnkr.co/edit/X1qxtVM15xNFvdzlkeYE?p=preview