ng-repeat отображает данные, но не отображается на экране

используя ионную среду, я хочу получить данные о категориях из бэкэнда 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 -->

но не могу показать это на экране.