ng-repeat呈现数据但不在屏幕上显示

Question

使用离子框架，我想从php后端获取类别数据并显示它们。

HTML

<script type="text/ng-template" id="home.html">
<div ng-controller="CategoryCtrl" ng-init="getCategories()">

    <div ng-repeat="category in categories" style="border:1px solid red;">
        {{category.name}}
    </div>
</div>
</script>

JS

.controller('CategoryCtrl', function($scope, $state, $http) {
    $scope.getCategories = function(){                    
        $http.get('http://localhost/test/server/test.php').then(function(response){
            $scope.categories = response;
        });
    }  
}

PHP

header('Content-Type: application/json');
$sql = "SELECT * FROM Categories";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()){
    $data[] = $row;
}
echo json_encode($data);

问题是在chrome控制台中我可以看到数据     

            <!-- ngRepeat: category in categories --><div ng-repeat="category in categories" style="border:1px solid red;" class="ng-binding">
                abc
            </div><!-- end ngRepeat: category in categories --><div ng-repeat="category in categories" style="border:1px solid red;" class="ng-binding">
                def
            </div><!-- end ngRepeat: category in categories --><div ng-repeat="category in categories" style="border:1px solid red;" class="ng-binding">
                ghi
            </div><!-- end ngRepeat: category in categories --><div ng-repeat="category in categories" style="border:1px solid red;" class="ng-binding">
                jkl
            </div><!-- end ngRepeat: category in categories -->

但无法在屏幕上显示。