angularjs and jquery conflict cause chrome stop responsing

Question

<div class="gridly-static">
  <div id={{y.id}} ng-repeat="y in Categories" ng-init="initCategories()">
    <div class="title">{{y.name}}</div>
  </div>
</div>

Categories variable is fetched from api service via $http.get(),and ng-init call initCategories is to reset the layout dynamically using jquery-gridly.The combination of two things make my chrome stop responding(The tab also can't close at all)

When I change the Categories to a object(don't fetch from internet), the code works find. Also, When I don't init the layout using $('xxx').gridly(), it works too.

I know combine angularjs and jquery is a bad idea. However, Why the code make the chrome stop running confused me.(loop ? caused by angular watch something?)

Answer 1

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
 // Code that uses other library's $ can follow here.
</script>

For more details Documentation