Question: why I can't start the spinner?

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.

[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);

[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');

   }]);

`