Populate jQuery UI accordion after AngularJS service call

Question

I\'m currently trying to build an AngularJS app where I\'m using a jQuery UI accordion control.

The problem is, that the jQuery UI accordion is initiated before<

Answer 1

My best practice is to resolve your asynchronous services before controller is initiated.

As you can see in the document, http://docs.angularjs.org/api/ngRoute.$routeProvider

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired.

Your controller and view won't be even started before your service is resolved or rejected.

There is a good video tutorial about this, https://egghead.io/lessons/angularjs-resolve

In your case, you can config routes like the following

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'main.html',
    controller: orderController,
    resolve: {
      categories: function(orderService) {
        return orderService.getProductCategoriesWithProducts();
      },
      user: function(userService) {
        return userService.getCurrentUser();
      }
    }
  });

Then, with your controller

app.controller('orderController', function($scope, categories, user) {
   //categories and user is always here, so use it.
});

I have also found a similar question and answer here