How to add a grid in Angular js with other existing angular component

I am trying to add a grid in angular js page. I have written the below script for it but it is not populating the data in the grid.

Below is the code written. Some of the things are coming up well but grid is not coming up with the sample data. What could be the reason for this.

    <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

 <h1>Order Dashboard</h1>
<div >
         <p><label for="CurrentDate">Current Date:</label><input type = "date" ng-model = "name">
        <label for="PreviousDate">Previous Date:</label><input type = "date" ng-model = "name"></p>
        </div>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="item in items">
        <p>{{item.profName}}
        <select ng-options="profVals for profVals in item.profVals" ng-model="item.selected"></select>
    </div>
</div>

<div ng-app="app">
    <div ng-controller="app.grid as ctrl" class="container text-center">
         <h4>Grid with Header Filters Demo</h4>

        <table class="table table-condense">
            <caption>Grid Test</caption>
            <thead>
                <tr class="bg-primary">
                    <th>Year</th>
                    <th>Make</th>
                    <th>Model</th>
                </tr>
                <tr>
                    <td>
                        <div class="control-group">
                            <div class="controls">
                                <input class="form-control" ng-model="ctrl.search.year" ng-change="ctrl.filter()" type="text">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="control-group">
                            <div class="controls">
                                <input class="form-control" ng-model="ctrl.search.make" ng-change="ctrl.filter()" type="text">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="control-group">
                            <div class="controls">
                                <input class="form-control" ng-model="ctrl.search.model" ng-change="ctrl.filter()" type="text">
                            </div>
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="itemp in ctrl.filteredList">
                    <td>{{item.year}}</td>
                    <td>{{item.make}}</td>
                    <td>{{item.model}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="bg-info">
                    <td colspan="3"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>


<script>
var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope',

function ($scope) {
    $scope.items = [{
        profName: "Order Type",
        profEdit: true,
        profVals: ["First", "Second", "Third"]
    }, {
        profName: "Order Channel",
        profEdit: true,
        profVals: ["First", "Second", "Third"]
    }];
}]);

var appName = 'app';
var app = angular.module(appName, ['ui.bootstrap']);
app.controller('app.grid', ['$scope', '$filter', gridCtrl]);


function gridCtrl($scope, $filter) {
    var ctrl = this;

    ctrl.items = [{
        year: 1999,
        make: 'Nissan',
        model: 'Altima'
    }, {
        year: 1999,
        make: 'Nissan',
        model: 'Cube'
    }, {
        year: 2011,
        make: 'Nissan',
        model: 'Rogue'
    }, {
        year: 2011,
        make: 'Nissan',
        model: 'xTerra'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Altima'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Cube'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'Rogue'
    }, {
        year: 2012,
        make: 'Nissan',
        model: 'xTerra'
    }, {
        year: 1999,
        make: 'Toyota',
        model: 'Corolla'
    }, {
        year: 1999,
        make: 'Toyota',
        model: 'Yaris'
    }, {
        year: 2012,
        make: 'Toyota',
        model: 'Camry'
    }, {
        year: 2012,
        make: 'Toyota',
        model: 'Rav4'
    }, {
        year: 2013,
        make: 'Toyota',
        model: 'Corolla'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Yaris'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Camry'
    }, {
        year: 2014,
        make: 'Toyota',
        model: 'Rav4'
    }];

    ctrl.filteredList = ctrl.items;
    ctrl.search = {};

    ctrl.filter = function () {
        this.filteredList = $filter('filter')(ctrl.items, ctrl.search);
    }

}
</script>

 </body>
</html>