Angular Controller - Angular Not Defined

Question

Dear Team,

 

I have a MVC Application, in which I have got the data in datatable.

 

I have created a view, and also made Angular Controller file.

 

I have debugged the code, I am getting the data in datatable, but I am not able to display it in view.

 

My View Code -

@{
ViewBag.Title = "PendingAssets";
}
<style>
.tableData {
border-left: solid 1px #D8C3C3;
border-top: solid 1px #D8C3C3;
}
.tableData tr {
}
.tableData td, .tableData th {
border-right: solid 1px #D8C3C3;
border-bottom: solid 1px #D8C3C3;
text-align: left;
padding: 5px;
}
.tableData td {
}
.tableData th {
background-color: #FAFAFA;
padding: 7px 5px;
border-bottom-color: #9C9C9C;
}
.odd {
background-color: #f3f3f3;
}
.even {
background-color: #ffffff;
}
</style>
<h2>PendingAssets</h2>
<div ng-controller="pendingassetscontroller">
<table class="tableData" width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>Computer.ComputerType</th>
<th>Model.Brand.Name</th>
<th>Model.Name</th>
<th>Computer.TcpIpHostName</th>
<th>Asset.SerialNo</th>
<th>User.UserName</th>
<th>RIL_Inventoried_User.UserName</th>
<th>Asset.Field1</th>
</tr>
<tr ng-repeat="e in PendingAssets" ng-class-odd="'odd'" ng-class-even="'even'">
<td>{{e.ComputerComputerType}}</td>
<td>{{e.ModelBrandName}} </td>
<td>{{e.ModelName'}}</td>
<td>{{e.ComputerTcpIpHostName}}</td>
<td>{{e.AssetSerialNo}}</td>
<td>{{e.UserUserName}}</td>
<td>{{e.RIL_Inventoried_UserUserName}}</td>
<td>{{e.AssetField1}}</td>
</tr>
</table>
</div>
@section scripts{
<script src="~/Scripts/AngularController/pendingassetscontroller.js"></script>
}

pendingassetscontroller.js Code -

//(function () {
// 'use strict';
var app = angular.module('myApp', [])//'MyApp') // extending from previously created angular module in the First Part
.controller('pendingassetscontroller', function ($scope, PendingAssetsService) { // explained in Part 2 about controller
$scope.PendingAssetsSrc = null;
PendingAssetsService.GetPendingAssetsList().then(function (d) {
$scope.PendingAssetsSrc = d.data; //Success callback
}, function (error) {
alert('Error!'); // Failed Callback
});
})
.factory('PendingAssetsService', function ($http) { // I have explained about factory in the Part 2
var fac = {};
fac.GetPendingAssetsList = function () {
return $http.get('/PendingAssets/GetPendingAssetsList')
}
return fac;
});
//})();

I am also sharing the error screenshot.

 

Please guide- where am I going wrong.

Please help as it is very urgent.

THank you all in advance.