I have a website with an MVC Site that utilizes a layout. Within the layout page, I have integrated an Angular App, Models, and Controllers which are functioning correctly. However, on one of my pages displayed within the layout, I am attempting to incorporate another Angular App & Controller with basic functions. You can view the concept here: Plunker for example.
Additional information:
I have referenced both of the .js files in the layout head tag:
<script src="~/Scripts/AdminVM.js"></script> <script src="~/Scripts/ShopVM.js"></script>All code in my layout page utilizing the first App is enclosed between two div tags. The first div has ng-app = "FirstApp", and the second has ng-controller = "FirstController".
I have tried the following:
- Inserting the two div tags with ng-app = "SecondApp" and ng-controller = "SecondController" inside my .cshtml file where the code is located.
- Placing the two div tags within the body of my layout page and using @RenderBody() between them.
I am unsure of what I am doing wrong as even the simplest tasks are not working:
ShopVM.js
var app = angular.module("ShopApp", []);
app.controller("ShopViewModel", function ($scope, $http) {
$scope.test = "Test123";
});
Shop.cshtml (Not the layout file)
<div ng-app="ShopApp">
<div ng-controller="ShopViewModel">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Cat1</a></li>
<li role="presentation"><a href="#">Cat2</a></li>
</ul>
<div>{{test}}</div>
<input id="Text1" type="text" ng-model="Shop.Test"/>
</div>
</div>
However, when I check, all I see is a simple test: {{test}}
What could be the issue with my code?