AngularJS with Foundation - Controller in Reveal Modal does not work

Question

I have not much experience when it comes to use AngularJS, but I am not a newbie. Worked with it already a little bit.

However, I am using AngularJS with Zurb Foundation 6. The Controller in my reveal Modal will not use any angular. For example I can write {{hallo}} and he will not render it, he will show me {{hallo}} and not the value of this variable.

You have to know, that this modal is in a template file for angular, because I am using angular-route. The strange thing is, that I am already using a modal in the index.html file and there angular in the modal works. But the modal in the template file (called dashboard.html) is not working.

That's my modal:

<div class="row">
  <div class="columns large-12 medium-12 small-12" ng-controller="LoadAllUsers">
    <button class="button" data-open="newUserModal" ng-click="load()">User hinzuf&uuml;gen</button>
    <!--                newUserModal                   -->
    <div class="tiny reveal" id="newUserModal" data-reveal>
      <div class="large-12 medium-12 small-12 columns">
        <div class="row">
          <h4 class="text-center">User zur Miete hinzuf&uuml;gen</h4>
          <br>
          <label>Username oder Name des neuen Users eingeben</label>
          <input type="text" placeholder="Max Mustermann" name="newuser" ng-model="userSearch" ng-change="search()">
          <h5>Suchtreffer</h5>{{hallo}}
          <button class="button" data-close>Abbrechen</button>
          <button class="button float-right">User hinzuf&uuml;gen</button>
        </div>
      </div>

      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <!--                /newUserModal                   -->
    <button class="button">Miete zur&uuml;ckziehen</button>
  </div>
</div>
</div>

My controller looks like this

routingApp.controller("LoadAllUsers", function($scope, $http) {
$scope.load = function() {
    var allUsers = [];

    $http({
        method: 'GET',
        url: 'someURL',
        params: {parameters: "values"}
    }).then(function successCallback(response) {
        angular.forEach(response.data, function(value, key) {
            allUsers[key] = {};

            angular.forEach(value, function(subvalue, subkey) {
                allUsers[key][subkey] = subvalue;
            });
        });
        $scope.hallo = "AN";
        console.log(allUsers);
    }, function errorCallback(error) {
        console.log(JSON.stringify(error.data));
    });

};

$scope.search = function() {
    console.log($scope.userSearch);
};

$scope.hallo = "HAAAAAAAAAAALLO";
});

I would appreciate, if anyone can help me. Thanks

Answer 1

I found the solution: I hat to user Angular Foundation 6. What you have to know is that it is now currently under work, so it may be not as stable as Angular Foundation 5. However, it helped me solving my problem.