ng-repeat renders data but doesn't show on screen

using ionic framework, i want to grab categories data from php backend and show them.

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);

problem is that in chrome console i can see the data

            <!-- 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 -->

but can't make it show on the screen.