Json object not rendering in MVC view - angularjs

Question

I am having trouble passing JSON object to my view. I am using angular to later bind the data to my view. But when I execute the page, the table in blank. Please see the code below
Code in my view
<div class="container" ng-init="courses = #Html.Raw(Model)">
<div class="row">
<div class="span10">
<table class="table table-condensed table-hover">
<tr>
<th>Course</th>
<th>Course Name</th>
<th>Instructor</th>
</tr>
<tr ng-repeat="course in courses">
<td>{{course.number}}</td>
<td>{{course.name}}</td>
<td>{{course.instructor}}</td>
</tr>
</table>
</div>
</div>
</div>
Code in my controller
public class CoursesController : Controller
{
// GET: Hello
public ActionResult Index()
{
return View("Index", "", GetSerialisedCourseVm());
}
public string GetSerialisedCourseVm()
{
var courses = new[]
{
new CourseVM {Number= "100", Name= "Physis", Instructor = "Abc"},
new CourseVM {Number= "101", Name= "Chemistry", Instructor = "test"},
new CourseVM {Number= "102", Name= "Biology", Instructor = "Mac"},
new CourseVM {Number= "103", Name= "History", Instructor = "Jack"},
new CourseVM {Number= "104", Name= "Maths", Instructor = "Ren"}
};
var settings = new JsonSerializerSettings{ContractResolver = new CamelCasePropertyNamesContractResolver()};
return JsonConvert.SerializeObject(courses, settings);
}
}
public class CourseVM
{
public string Number { get; set; }
public string Name { get; set; }
public string Instructor { get; set; }
}
when i do an F12 i can see the following error
angular.min.js:62 Error: Unexpected end of expression: courses = [{
at Error (native)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:67:426)
at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:71:164)
at A (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:70:288)
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:70:204)
at x (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:70:70)
at t (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:69:454)
at s (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:69:384)
at p (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:69:321)
at o (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:69:251) <div class="container" ng-init="courses = [{" number":"100","name":"physis","instructor":"Abc"},{"number":"101","name":"chemistry","instructor":"test"},{"number":"102","name":"biology","instructor":"Mac"},{"number":"103","name":"history","instructor":"Jack"},{"number":"104","name":"maths","instructor":"Ren"}]"="">
Using the unminified version of angular
angular.js:13294 Error: [$parse:ueoe] Unexpected end of expression: courses = [{
http://errors.angularjs.org/1.5.2/$parse/ueoe?p0=courses%20%3D%20%5B%7B
at http://localhost:81/Scripts/angular.js:68:12
at Object.AST.peekToken (http://localhost:81/Scripts/angular.js:13895:13)
at Object.AST.object (http://localhost:81/Scripts/angular.js:13851:14)
at Object.AST.primary (http://localhost:81/Scripts/angular.js:13769:22)
at Object.AST.unary (http://localhost:81/Scripts/angular.js:13757:19)
at Object.AST.multiplicative (http://localhost:81/Scripts/angular.js:13744:21)
at Object.AST.additive (http://localhost:81/Scripts/angular.js:13735:21)
at Object.AST.relational (http://localhost:81/Scripts/angular.js:13726:21)
at Object.AST.equality (http://localhost:81/Scripts/angular.js:13717:21)
at Object.AST.logicalAND (http://localhost:81/Scripts/angular.js:13709:21) <div class="container" ng-init="courses = [{" number":"100","name":"physis","instructor":"Abc"},{"number":"101","name":"chemistry","instructor":"test"},{"number":"102","name":"biology","instructor":"Mac"},{"number":"103","name":"history","instructor":"Jack"},{"number":"104","name":"maths","instructor":"Ren"}]"="">
Output of #Html.Raw(Model) in the view
[{"number":"100","name":"Physis","instructor":"Abc"},{"number":"101","name":"Chemistry","instructor":"test"},{"number":"102","name":"Biology","instructor":"Mac"},{"number":"103","name":"History","instructor":"Jack"},{"number":"104","name":"Maths","instructor":"Ren"}]

Answer 1

The solution is simply to replace all the " marks with ' marks.
In your output for model, you have this:
[{"number":"100","name":"Physis","instructor":"Abc"},{"number":"101","name":"Chemistry","instructor":"test"},{"number":"102","name":"Biology","instructor":"Mac"},{"number":"103","name":"History","instructor":"Jack"},{"number":"104","name":"Maths","instructor":"Ren"}]
The " marks there are ending the ng-init attribute, causing it to only see ng-init="courses = [{".

Answer 2

Data Flow
Factory
set up a factory to get your data (where data is your JSON array)
.factory('homeFactory', [ function(){
return{
getData: function(){
return data
}
};
}]);
Controller
then in your controller you must use your factory
.controller('homeCtrl', [ '$scope','homeFactory', function($scope, homeFactory){
$scope.data = {};
homeFactory.getData().then(function(res){
$scope.data= res.data;
});
}]);
View
then in your view
just throw the curly bracket notation in a for each (this assumes that name is a json key in your array) or you can just print out data
<div ng-repeat="value in data">
{{value.name}}
</div>
please ask if there is something unclear and I will update this answer.