ng-include使ng-controller和ng-repeat不起作用

Question

I need to include some pieces of code in the principal HTML page, but when I use ng-include, the HTML is added, but the code doesn't seem to work properly.

I have 3 main component:

index.html ( the main Page )

<div id="Central" ng-hide="masterCtrl.isMenuOpen()">
    <div id="Login" ng-controller="LoginController as loginCtrl" ng-hide="masterCtrl.isUserLogged()" ng-include="'Login/index.html'"></div>
    <div id="SiteList" ng-controller="SiteController as siteCtrl" ng-if="masterCtrl.isUserLogged()" ng-include="'Select/index.html'" ng-init="siteCtrl.getSites()"></div>
</div>

Input.html ( a simple piece of code, I add into the main HTML page using ng-include)

    <div class="sel sel--black-panther" >
         <select name="select-site" id="select-site"  >
           <option value="" disabled>Sito</option>
           <option ng-repeat="sito in siteCtrl.siti" value="{{sito.name}}">{{sito.name}}</option>
        </select>

    </div>

   {{siteCtrl.siti[0].name}}

And last this is the app.js

    var app = angular.module('Test', ['ngIdle','ngRoute']);

    app.controller('MasterController', function($scope, $http,communication) {

      this.isMenuOpen = function(){
          return communication.getIsMenuOpen();
      };

      this.isUserLogged = function(){
        return communication.getIsUserLogged();
      }

      this.getUtente = function(){
        return communication.getUtente();
      }

    });

    app.controller('SiteController', function($scope, $http,communication,checkToken) {

      var amministrazione = this;
      amministrazione.siti= [];

      this.getSites = function(){    //funzione per tentare il Login
        var user = communication.getUtente();
        if( . . .){  //Amministratore Sito
          var loginId = user.loginId;
          var token = user.token;
          $scope.SiteRequest(. . .);
        }else{
          //Non AUTORIZZATO
        }
      };

      $scope.SiteRequest = function (. . .) {   //funzione che chiama il servizio rest del Login

        var isTokenValid = checkToken.getData( . . .);
        isTokenValid.then(function(result) {
          if(result){
            $http({
               method: "GET",
               url: " . . .",
               headers: {
                 . . .
               },
             }).then(function mySuccess(response) {
            setTimeout(
             function(){
               $scope.$apply(


           function (){
               amministrazione.siti = response.data;
             }
           )
         }, 2000);  


  }, function myError(response) {
             });
           }else{
             alert("Token Non più valido, verra reindirizzato alla pagina di Login");
           }
        });


      }


    });



    //Questo servizio gestisce la communicazione tra i vari controller ed il MasterController
    app.service('communication', function($http) {
      var isMenuOpen = false;
      var isUserLogged = false;
      var utente = [];

      var setIsMenuOpen = function(value) {
          isMenuOpen = value;
      };

      var getIsMenuOpen = function(){
          return isMenuOpen;
      };

      var setIsUserLogged = function(value) {
          isUserLogged = value;
      };

      var getIsUserLogged = function(){
          return isUserLogged;
      };

      var setUtente = function(value) {
          utente = value;
      };

      var getUtente = function(){
          return utente;
      };

      var getUserLvl = function(){
        . . .
      }

      return {
        setIsMenuOpen: setIsMenuOpen,
        getIsMenuOpen: getIsMenuOpen,
        setIsUserLogged: setIsUserLogged,
        getIsUserLogged: getIsUserLogged,
        setUtente: setUtente,
        getUtente: getUtente,
        getUserLvl: getUserLvl
      };

    });

    app.factory('checkToken', function($http) {

        var getData = function(loginId,token) {
            // Angular $http() and then() both return promises themselves
            return $http({
              method: "PUT",
              url: ". . .",
              headers: {
                . . .
              },
            }).then(function(result){

                return result.data;
            });
        };

        return { getData: getData };
    });

If I put all the code in a page it works... but if I wrote it like this... it doesn't work like I wish... infact the expression between the angular brackets is execute... but the other code no. What should I do ?

Answer 1

I have done a sample code snippet replicating your problem and it seems working, Run the code snippet

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; var vm = this; vm.isUserLogged = function(){ return true; } }); app.controller('SiteController', function($scope) { var vm = this; vm.siti = []; vm.getSites = function(){ vm.siti = [ {id:1, name:'Theophilus Omoregbee'}, {id:2, name:'Wisdom Omoregbee'}, { id:3, name:'Miracle Omoregbee'} ]; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="plunker" ng-controller="MainCtrl as masterCtrl"> <div id="SiteList" ng-controller="SiteController as siteCtrl" ng-if="masterCtrl.isUserLogged()" ng-include="'input.html'" ng-init="siteCtrl.getSites()"></div> </body> <script type="text/ng-template" id="input.html"> <div class="sel sel--black-panther" > <select name="select-site" id="select-site" > <option value="" disabled>Sito</option> <option ng-repeat="sito in siteCtrl.siti" value="{{sito.name}}">{{sito.name}}</option> </select> </div> {{siteCtrl.siti[0].name}} </script>