awake hot towel angular 1.2

Question

                   Hi all,

Environment : vs 2013 express for web, hot towel angular 1.2, Breeze.WebApi2, sql server 2012 express.

When I first start my wep app, the "busyindicator" doesn't appear and then requested datas appear in the page.

Why the "busyindicator" doesn't appear ?

As I'm developping I'm using the browser (firefox) without cookies nor cache.

I haven't touched the existing view-viewmodels, services, config, added some functionnalities such as angularFileUpload in app.js (after dwonloading this javascript).

Everything's working fine, except that problem with the "busyindicator".

The app is starting with view-viewmodel client :

html:

<section id="dashboard-view" class="mainbar" data-ng-controller="client as vm">
    <section class="matter">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="today-datas">
                        <li class="blightblue">
                            <div class="pull-left"><i class="fa fa-plane"></i></div>
                            <div class="datas-text pull-right">
                                <span class="bold">11, 12, 13 Février 2014<br />Microsoft Techdays, France</span>
                            </div>
                            <div class="clearfix"></div>
                        </li>

                        <!--<li class="borange">
                            <div class="pull-left"><i class="fa fa-envelope"></i></div>
                            <div class="datas-text pull-right">
                                <span class="bold">{{vm.messageCount}}</span> Messages
                            </div>
                            <div class="clearfix"></div>
                        </li>-->

                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="widget wviolet">
                        <div data-cc-widget-header title="Client"
                             allow-collapse="true"></div>
                        <div class="widget-content text-center text-info">
                            <table class="table table-condensed table-striped">
                                <thead>
                                    <tr>
                                        <th>Client Id</th>
                                        <th>Raison sociale</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr data-ng-repeat="c in vm.clients">
                                        <td>{{c.clientId}}</td>
                                        <td>{{c.raisonSociale}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="widget-foot">
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="widget wgreen">
                        <div data-cc-widget-header title="Add a client" allow-collapse="true" />
                        <div class="widget-content text-center text-info">
                            <form name="RegisterForm" ng-submit="submit()" data-n ng-controller="vm.Ctrl">
                                <table class="table table-condensed table-striped">
                                    <tbody>
                                        <tr>
                                            <td>Raison Sociale</td>
                                            <td><input ng-model="vm.client.RaisonSociale" required width="200" /></td>
                                            <td><input type="submit" id="submit" value="Submit" /></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </form>
                        </div>
                        <div class="widget-foot">
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>

js:

(function () {
    'use strict';
    var controllerId = 'client';
    angular.module('app').controller(controllerId, ['common', 'datacontext', client]);

    function client(common, datacontext) {
        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(controllerId);

        var vm = this;
        vm.clients = [];
        vm.client = client;
        vm.title = 'Client';
        vm.Ctrl = Ctrl;

        var client = {
            ClientId: "",
            RaisonSociale:""
        }

        activate();

        function activate() {
            var promises = [getClients()];
            common.activateController(promises, controllerId)
                .then(function () { log('Activated Client View'); });
        }

        function getClients() {
            return datacontext.getClients().then(function (data) {
                return vm.clients = data;
            });
        }

        function Ctrl($scope) {
            $scope.submit = function () {
                datacontext.addClient(vm.client)
                    .then(getClients());
            }
        }
    }
})();

datacontext :

function getClients() {
    var manager = new breeze.EntityManager(config.remoteServiceName);
    var query = breeze.EntityQuery.from('GetClients');
    return $q.when(manager.executeQuery(query)
    .then(successCallback)
    .catch(failCallback)     // same as 'then(null, failCallback)'
    .finally(finalCallback) // sort of like 'then(finalCallback, finalCallback)'
    );
}

On server-side :

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.Entity;
    using System.Data.Entity.Infrastructure;
    using System.Linq;
    using System.Net;
    using System.Net.Http;
    using System.Threading.Tasks;
    using System.Web.Http;
    using System.Web.Http.Description;
    using CVApp.Models;
    using Breeze.WebApi2;
    using Breeze.ContextProvider.EF6;
    using System.Web.Mvc;
namespace CVApp.Controllers
{
    [System.Web.Mvc.Authorize]
    [BreezeController]
    public class BreezeController : ApiController
    {
        private CVIntegreEntities db = new CVIntegreEntities();
        readonly EFContextProvider<CVIntegreEntities> _contextProvider = new EFContextProvider<CVIntegreEntities>();

        [System.Web.Http.AcceptVerbs("GET")]
        [OutputCache(Duration = 259200)]
        public string Metadata()
        {
            return _contextProvider.Metadata();
        }

    .
    .
    .
            // GET api/Breeze
            [System.Web.Http.AcceptVerbs("GET")]
            public IQueryable<Client> GetClients()
            {
                return db.Clients;
            }

I've well seen in shell.js that the "busyindicator" should be starting at the change of route :

$rootScope.$on('$routeChangeStart',
    function (event, next, current) { toggleSpinner(true); }
);

and should be ending at the ActivateSuccess :

$rootScope.$on(events.controllerActivateSuccess,
    function (data) { toggleSpinner(false); }
);

So what's wrong, why at first start "Please wait ..." doesn't appear ?

Any idea ?