Почему я не могу получить доступ к значению $ scope из MainController в index.cshtml?

Я пытаюсь создать одностраничное приложение AngularJS, MVC ASP.Net, поэтому я создал новую папку в моем проекте, которая содержит app.js:

var myApp = angular.module('app', []);

и другая папка, содержащая MainController.js:

myApp.controller("MainController",['$scope', function ($scope) {
$scope.naslov = "MP3 Manager"}]);

next, inside Views/Home Я добавил это в свой тег div

 ng-app="app" ng-controller="MainController"

и, наконец, я понял:

<div class="row" ng-app="app" ng-controller="MainController">
<div class="col-md-6">
    <h2>Pjesme</h2>
    <p>{{ naslov }}</p>
    <p>
        ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
        enables a clean separation of concerns and gives you full control over markup
        for enjoyable, agile development.
    </p>
    <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
</div>
<div class="col-md-6">
    <h2>Playliste</h2>
    <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
    <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
</div>

когда я запускаю это приложение, он показывает {{ naslov }} вместо "MP3 Manager"

https://imgur.com/L1gmSBz

Почему это происходит?