Three linked problems : Argument 'MainCtrl' is not a function and Module 'myApp' is not available

ionic-v1
1

I got these three problems, which I think are linked. I read a lot of posts, and Google it since 2 days, but because I’m working with the ionic creator, I didn’t find a proper answer…

The curious fact is I can run and use my app except one MainCtrl function, it works, but I still have these errors messages :

Error: [$injector:nomod] Module ‘myApp’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Error: [ng:areq] Argument ‘MainCtrl’ is not a function, got undefined
http://errors.angularjs.org/1.5.3/ng/areq?p0=MainCtrl&p1=not%20aNaNunction%2C%20got%20undefined

Error: [ng:areq] Argument ‘LoadingCtrl’ is not a function, got undefined

Here is my code, I’m sure it’s a little mistake but I can’t figure it out :

// Here is the module declaration

var myApp = angular.module('app.directives', []);

// The first controller's

myApp.controller('MainCtrl', ['$scope', '$ionicPopup', '$timeout', function($scope, $ionicPopup, $timeout) {
  
$scope.createPopUpService = function(){

var newTemplate = '<div>Hi</div>';  
  
var myService = $ionicPopup.show({
        template: newTemplate,
        title: 'Test',
        scope: $scope,
        cssClass: 'popJoinService',
        buttons: [
              { text: '<b>Cancel<b/>',
                type: 'button-assertive'
              },
              {
                text: '<b>OK</b>',
                type: 'button-positive',
                onTap: function(e) {
                    console.log("Hello");
                  }
              }
            ]
          });
};
}]);

// The second controller's

myApp.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...',
      duration: 3000
    }).then(function(){
       console.log("The loading indicator is now displayed");
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide().then(function(){
       console.log("The loading indicator is now hidden");
    });
  };
});

<ion-view title="HTML1" style="background-color:#93E693;">

    <ion-refresher (ionRefresh)="doRefresh($event)" ng-controller ="LoadingCtrl">
                <ion-refresher-content
                      pullingIcon="arrow-dropdown"
                      pullingText="Pull to refresh"
                      refreshingSpinner="circles"
                      refreshingText="Refreshing...">
                </ion-refresher-content>
    </ion-refresher>

  
<!-- I also tried this : ng-app="app.directives" and ng-app="" but it seems the change as no effect on the result-->
<!-- Because it is ionic creator, I can't add scripts like usually -->
  
  <div ng-controller="MainCtrl">
      <button class="item-avatar button  button-small button-calm  button-block icon-left ion-android-add" ng-click="createPopUpService()">test button</button>
  </div>
  
</ion-view>
2

Is someone see something ? Maybe the syntax is not good ?