**EDIT**: Ive recreated the problem here <http://plnkr.co/edit/w6yJ8KUvD3cgOrr56zH3?p=preview>

I'm new to angularjs and I'm trying to create a popupmodal with some data..

I can't understand why it is empty the first time I open it, but the second (and so on) its good. By good I mean that the header is there. So every time the page is reloaded it's empty the first time.

Can you see what I am missing?

ModalController.js:

```
angular.module("Modal")
.controller("ModalController",
[
    "$scope", "$uibModal", "$log", "ModalService", "AuthenticationService",
    function($scope, $uibModal, $log, ModalService, AuthenticationService) {
        AuthenticationService.GetCurrentWindowsUser(function(username) {
            $scope.username = username;
        });

        $scope.openModal = function () {
            AuthenticationService.GetItems($scope.username, function(items) {
                $scope.items = items;
            });

            $scope.animationsEnabled = true;
            $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'modals/items.html',
                controller: 'ModalInstanceController',
                size: 'lg',
                resolve: {
                    funds: function() {
                        return $scope.items;
                    }
                }
            });
        };
    }
])
.controller('ModalInstanceController', function($scope, $uibModalInstance, items) {

    $scope.items = items;

    $scope.ok = function() {
        $uibModalInstance.close();
    };

});

```

items.html:

```
<div class="container" ng-controller="ModalController">
<script type="text/ng-template" id="modals/items.html">
    <div class="modal-header">
        <h3 class="text-centered">items</h3>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">SELECT</button>
    </div>
</script>

</div>

```

Home.html:

```
<div class="container" ng-controller="ModalController">
<button type="button" class="btn btn-default" ng-click="openModal()">Large modal</button>
</div>

```
['https://Stackoverflow.com/questions/34092276', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1789325/']
I managed to solve this by removing the script tag in my modal which I wanted to display

```
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>

```

<http://plnkr.co/edit/D4B6puSS2Z9j4DPPBTWx?p=preview>
```
angular.module("Modal")
.controller("ModalController",
[
    "$scope", "$uibModal", "$log", "ModalService", "AuthenticationService",
    function($scope, $uibModal, $log, ModalService, AuthenticationService) {

      AuthenticationService.GetCurrentWindowsUser(function(username) {
            $scope.username = username;
        });

        $scope.openModal = function () {
            AuthenticationService
              .GetItems($scope.username, function(items)  {
                $scope.items = items;
                $scope.animationsEnabled = true;
               showModal();
            });
        };

      function showModal(){
         $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'modals/items.html',
                controller: 'ModalInstanceController',
                size: 'lg',
                resolve: {
                    funds: $scope.items
                    }
                });
      }
    }
])
.controller('ModalInstanceController', function($scope, $uibModalInstance, items) {

    $scope.items = items;

    $scope.ok = function() {
        $uibModalInstance.close();
    };

});

```

Refactored it a bit.

Would hazard a guess that the first time you call the modal $scope.items is empty as the service has not finished. See if my example works. The problem will other stuff running before the async call is finished. The second time round it works as it is using the previous $scope.items data. You should try and use some form of promises. Also what dose your service look like?