AngularJS ng-repeat inside ng-if

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller("MyCtrl", function($scope)
            {
            $scope.selection =
              {
                ids:
              {
                    "50d5ad": true
                }
            };
            $scope.categories = [
              {
                "name": "Sport",
                "id": "50d5ad"
            },
              {
                "name": "General",
                "id": "678ffr"
            }];
        })
    </script>
</head>

<body ng-app="app">
    <div ng-controller="MyCtrl">
        <div ng-repeat="data in categories">
            <div ng-if="data.name == 'Sport' ">
                {{data.name}}
            </div>
        </div>
    </div>
</body>

</html>