Where do I put the Angular code in this Mean.js app to make this list sortable?

Following the advice of @Pavlo to use https://github.com/angular-ui/ui-sortable,

I have this repeating list that I want to make sortable.

<div ui-sortable ng-model="regions" class="list-group region-list">
    <a data-ng-repeat="region in regions" data-ng-href="#!/regions/{{region._id}}" class="list-group-item">
    <h4 class="list-group-item-heading" data-ng-bind="region.name"></h4>
    </a>
</div>

Following the advice of @nrodic and added 'ui.sortable' to config.js.

var applicationModuleVendorDependencies = ['ngResource', 'ngCookies',  'ngAnimate', 'ngTouch', 'ngSanitize',  'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];

However, when I add that I get the following message:

"ui.sortable: jQuery should be included before AngularJS!"

Any further help is appreciated.

Thank you.

The answer depends on your application's modules. To register dependency in main module you can edit public/config.js and add 'ui.sortable' to existing list:

var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate',
    'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];

If you are registering your own module and want to enable ui.sortable there, then look for file public/modules/<my-module>/*module.js and add dependency there:

ApplicationConfiguration.registerModule('<my-module>', ['ui.sortable']);

Hope this helps.

I had the exact same problem. Try these steps:

  1. bower install jquery --save
  2. add 'public/lib/jquery/dist/jquery.min.js', 'public/lib/jquery-ui/jquery-ui.min.js, in front of angular.js in config\env\all.js
  3. add 'ui.sortable' in applicationModuleVendorDependencies located in public/config.js

Following these steps should fix the problem.