Hi All,

When we need to use AngularJS to bind controls with AngularJS Model but we have MVC Model filled through MVC Controller, we can follow below steps to do the same without using "ng-init".

Step 1: Create two js files in Scripts Folder:

A) AngularMain.js

window.angularModuleDependencies.push("ngMaterial");
window.angularModuleDependencies.push("ngMdIcons");
window.angularModuleDependencies.push("ngSanitize");

var app = angular.module('App', window.angularModuleDependencies);

B) sample.js

app.controller('SampleController', ['$mdMedia', '$mdDialog', '$scope', '$http', '$filter', function ($mdMedia, $mdDialog, $scope, $http, $filter) {
    $scope.model = modelJson;
}]);

Step 2: In Bundle Config add two new bundles:

bundles.Add(new ScriptBundle("~/bundles/main-controller").Include("~/Scripts/AngularMain.js"));
bundles.Add(new ScriptBundle("~/bundles/sample-controller").Include("~/Scripts/sample.js"));

Step 3: In your Layout Page include AngularJS libraries and render main-controller bundle:

 <!-- Angular Material requires Angular.js Libraries -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src="//code.angularjs.org/1.2.20/angular-sanitize.min.js"></script>

    <!-- Angular Material Library -->
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

    <!-- Angular Material Icons Library -->
    <!-- See https://klarsys.github.io/angular-material-icons/ -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.6.0/angular-material-icons.min.js"></script>

    <script type="text/javascript">
        window.angularModuleDependencies = [];
    </script>

    @Scripts.Render("~/bundles/main-controller")

Step 4: In your cshtml page where you need to use angular model from MVC model:

NOTE: One assumption your view is strongly typed view.

@section scripts 
{
 @{
   var modelData = new
   {
    Id = Model.Id,
    Title = Model.Title
   };
 }
 <script type="text/javascript">
  var modelJson = @Html.Raw(Json.Encode(modelData));
 </script>
 @Scripts.Render("~/bundles/sample-controller")
}

And now you are free to use {{model.Id}} in your view.

Happy Coding.....