AngularJS MVC Pass model to view. How to populate angular table

You need to convert your model to a javascript object and pass that to your angular controller. You can use JsonConvert.SerializeObject() method to do that.

So in your view, add this code.

@section Scripts{   
  <script src="~/Scripts/YourAngularController.js"></script>    
  <script>
    var m = angular.module("app")
         .value("pageModel",@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));

  </script>    
}

And in your angular controller which is in YourAngularController.js file,

var app = angular.module("app", []);
var ctrl = function (pageModel) {

    var vm = this;
    vm.productlist= pageModel; //assuming pageModel is a list of products

};
app.controller("ctrl", ctrl);

And in your view you can loop through the productList collection.

<div ng-app="app" ng-controller="ctrl as vm">
  <div id="productListing">
     <table class="table-responsive">
          <tr ng-repeat="product in vm.productlist">
                <td>{{product.Name}}</td>
          </tr>
     </table>
  </div>
</div>

You could assign your C# VM to an angular controller scope by using ng-init and serializing your C# VM as a Json using JsonConvert.SerializeObject

<div ng-init="[email protected](this.Model)"></div>
<div id="productListing" ng-controller="your controller">
    <table class="table-responsive">
        <thead></thead>
        <tbody>
            <tr ng-repeat="product in productlist">
                <td>{{product.Name}}</td>
            </tr>
        </tbody>
    </table>
</div>