Question: why I can't start the spinner?

[germanger]

I've been using a different "way" of creating controllers, so is not exactly as your example.
I can't get the spinner to start:

var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'toaster', 'angularSpinner']);

angular.module('myApp').controller('productsController', function($scope, $modal, $http, toaster, usSpinnerService) {

    $scope.hey = "hey!";
    usSpinnerService.spin('loading-products');  // <-- not working, no errors thrown though.
    ...

});

My view is as follows:

  <h1>Products</h1>
  {{hey}}

  <span us-spinner="{radius:30, width:10, length: 16}" spinner-key="loading-products"></span>

"hey is correctly displayed" (just as a reference)

Am I bringing the usSpinnerService service in an incorrect manner?
Thank you.

I though of asking this in stackoverflow but here you can also tag the issue as a question, right? sorry if not.

[germanger]

I later tried the array notation for defining controllers (the one in your examples) and it didn't work either, uhm.

[karneaud]

bump

[psaia]

Just had this issue as well. It's because the $broadcast is firing before the $on is ready. While it isn't ideal, try wrapping your spin method in a timeout:

$timeout(function() {
  usSpinnerService.spin('my-spinner');
}, 100);

[karneaud]

what @petesaia said!

[jarandaf]

Thanks @petesaia.

[Aeon7]

Hello, I used $timeout to resolve this, too. Is there another solution for this issue?

[tvervest]

I've encountered this issue as well and resolved it using $timeout. A solution for this would be greatly appreciated, or at least a not in the readme to alert new developers of this feature and the current workaround.

[charlesdg]

+1 for the $timeout

[ollivierv]

+1 for $timeout, same problem, same solution, but it's a little bit "dirty" ...

[adam-marshall]

+1 for timeout

[Hiieu]

$timeout doesn't works for me.

[shahzadthathal]

Here is working solution!
I just put us-spinner directive above ng-view

`

<div class="container">

<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>

<!-- All templates will load here -->

<div ng-view=""></div>

</div>

<!-- /.container -->

`
and call in my controller

`

        var MainCtrl =   clientApp.controller('MainCtrl', ['$scope', '$http', 'usSpinnerService',

      function ($scope, $http, usSpinnerService) {

    usSpinnerService.spin('spinner-1');

    $scope.products = [];

   $http.get(AppConfig.SERVERURL + '/api/product/list')
    .then(function (result) {
       $scope.products =  result.data;

    });

    usSpinnerService.stop('spinner-1');

   }]);

`

[defra91]

I had the same problem, with the solution of @petesaia now it works, but I think it's a little dirty.

[shahzadthathal]

Try with my solution it is working...