ng-repeat not working when include jQuery

Question

I'm using zurb-foundation with AngularJS.

I have the following code:

<div class="row full" ng-controller="Movies">
    <div class="large-3 columns">    
        <form class="custom">
            <select id="customDropdown" class="small button dropdown secondary radius">
                <option DISABLED SELECTED>Movie selection</option>
                <option ng-repeat="movie in movie_list.movies">{{movie.name}}</option>
            </select>
        </form>
    </div>
</div>

function Movies($scope) {
    $scope.movie_list = { movies : [{name:'Movie1'}, {name:'Movie2'}]}; 
}

I have included the jQuery plugin, because it is needed for foundation. When jQuery is not included the code works fine, but when I include jQuery then nothing is shown in the dropbox, and all the text that should be there is at the bottom of the page.

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background pay attention to the summary part. — agriboz, Mar 13 '13 at 13:31
I did read that before posting, but has i sad in the question i have included the jQuery plugin, because it is needed for foundation. — KatT, Mar 13 '13 at 14:56
Looks like there can be compatibility issues with Angular and jQuery. If you are using foundation 4 you might try Zepto instead of jQuery. You might also turn off a lot of the extra foundation scripts, (orbin, reveal, etc.) if they are not being used. — JAMESSTONEco, Mar 13 '13 at 15:44
Yes i'm using Foundation 4, using Zepto or jQuery causes the same problem. I will try to disable the scripts as you suggested. tanks — KatT, Mar 13 '13 at 15:58
it was foundation.forms.js, probably uses jQuery/Zepto and that's why it worked without it. tanks, i looked everywhere for an answer, i feel a little stupid for not thinking about that. — KatT, Mar 13 '13 at 16:11

score 0 · Answer 1 · answered Mar 23 '13 at 13:25

Have a look at my Plnkr :- http://plnkr.co/edit/9w2jTg?p=preview

I'm using the Foundation select box with jQuery and AngularJS and it's working fine. Might be something to do with the order you script references are in. Hard to say without seeing your code.
Also, I did notice that when the first select option is disabled and has no empty value, the select box becomes blank and the only way to open it is to click on the little arrow, so:

this doesn't work correctly:

<option disabled>Please select...</option>

works fine:

<option value="" disabled>Please select...</option>

ng-repeat not working when include jQuery

1 Answers1