angular.min.js не загружается правильно с загрузкой jquery

Question

Я пытаюсь загрузить html-страницу, чтобы div в другом представлении, используя загрузку jquery.

$("#sideMenuCustomerDivition").click(function (e) {
    e.preventDefault();
    $('#subContents').load('Main/Customer');
});

Это мой HTML

<div class="contents" id="subContents">

</div>
<!-- CDN JavaScript Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<!-- end-->

Я поместил html-таблицу в другое представление и пытаюсь загрузить данные в эту таблицу с помощью angular. Но мой стол отображается такЭто мой JavaScript для загруженного просмотра

    angular.module('myApp', ['smart-table']).controller('safeCtrl', ['$scope', function ($scope) {

    var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
    var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
    var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
    var id = 1;

    function generateRandomItem(id) {

        var firstname = firstnames[Math.floor(Math.random() * 3)];
        var lastname = lastnames[Math.floor(Math.random() * 3)];
        var birthdate = dates[Math.floor(Math.random() * 3)];
        var balance = Math.floor(Math.random() * 2000);

        return {
            id: id,
            firstName: firstname,
            lastName: lastname,
            birthDate: new Date(birthdate),
            balance: balance
        }
    }

    $scope.rowCollection = [];

    for (id; id < 5; id++) {
        $scope.rowCollection.push(generateRandomItem(id));
    }

    //copy the references (you could clone ie angular.copy but then have to go through a dirty checking for the matches)
    $scope.displayedCollection = [].concat($scope.rowCollection);

    //add to the real data holder
    $scope.addRandomItem = function addRandomItem() {
        $scope.rowCollection.push(generateRandomItem(id));
        id++;
    };

    //remove to the real data holder
    $scope.removeItem = function removeItem(row) {
        var index = $scope.rowCollection.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }
}]);

и это HTML

 <table st-table="rowCollection" class="table table-striped">
    <thead>
        <tr>
            <th>first name</th>
            <th>last name</th>
            <th>birth date</th>
            <th>balance</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in rowCollection">
            <td>{{row.firstName}}</td>
            <td>{{row.lastName}}</td>
            <td>{{row.birthDate}}</td>
            <td>{{row.balance}}</td>
            <td>{{row.email}}</td>
        </tr>
    </tbody>
</table>
<script src="~/Scripts/CustomerView.js"></script>