I'm trying to populate a datatables from a API using angularjs one, but the problem is when I load the page, table is filled but on the bottom says "No data available in table" and if I try to sort, filter change nb. of show all data disappeared and only "No data available in table" is shown.

The HTML

```
<table id="example" ng-if="controls" datatable="ng" 
       class="table table-bordered bordered table-striped table-condensed datatable"
       ui-jq="dataTable"
       ui-options="dataTableOpt" >
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="control in controls">
            <td>@{{control.train}}</td>
            <td>@{{control.time}}</td>
            <td>@{{control.location}}</td>
            <td>@{{control.case}}</td>
            <td>@{{control.quantity}}</td>
        </tr>
    </tbody>
</table> 

```

The service

```
(function () {
  var app = angular.module('mainApp');

  app.service('MyService', ['$http','$q', function ($http,$q) {

          this.getControls = function() {
            var def = $q.defer();

            $http.get("/api/control")
                .then(function(data) {
                    def.resolve(data);
                },function(error) {
                    def.reject(error);
                });
            return def.promise;
        }

  }]);
})();

```

The controller

```
(function () {

var app = angular.module('mainApp', ['ui.select2', 'ngAnimate', 'ngSanitize', 'toaster', 'ui.utils', 'ui.bootstrap']);
app.controller('ControlsController', ['$scope', '$filter', '$window', 'MyService', '$http', '$q', '$timeout', function ($scope, $filter, $window, MyService, $http, $q, $timeout) {

        $scope.controls = [];
        angular.element(document).ready(function () {
            MyService.getControls().then(function (result) {
                $scope.controls = result.data.data;
            });
        });

    }]);
})();

```

I tried to put, ng-if, ng-show, timeout but it doesn't work.
Only if I declare an array with all values in the controller the row are shown and filters, search, works.
It's a problem related to the http request, the data are loaded after the DOM is created but I cannot find a solution.

Someone can help me ?