Error - model sent to the view is incorrect - angularjs

Question

I am getting following error message.Could somebody tell me why I am getting the following error message. My model is getting initialized with values when I debug the controller.
The model item passed into the dictionary is of type 'AngularJSMvcExample.Models.RegistrationVm', but this dictionary requires a model item of type 'System.String'.
My model code
namespace AngularJSMvcExample.Models
{
public class RegistrationVm
{
public string Courses { get; set; }
public string Instructors { get; set; }
}
}
My Controller code
namespace AngularJSMvcExample.Controllers
{
public class RegistrationController : Controller
{
private RegistrationVmBuilder _registrationVmBuilder = new RegistrationVmBuilder();
// GET: Registration
public ActionResult Index()
{
return View(_registrationVmBuilder.BuildRegistrationVm());
}
}
}
My ViewCode
#model AngularJSMvcExample.Models.RegistrationVm
#{
ViewBag.Title = "Registration";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container" ng-controller="RegistrationController">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li>
<span class="navbar-brand">Registration</span>
</li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-bar">
<li >Browse Catalog</li>
<li>Browse Instructors</li>
</ul>
</div>
</div>
</div>
</div>
My RegistrationVmBuilder code
namespace AngularJSMvcExample.Models
{
public class RegistrationVmBuilder
{
public RegistrationVm BuildRegistrationVm()
{
var registrationVm = new RegistrationVm
{
Courses = GetSerialisedCourse(),
Instructors = GetSerialisedInstructors()
};
return registrationVm;
}
public string GetSerialisedCourse()
{
var courses = new[]
{
new CourseVm {Number= "100", Name= "Physis", Instructor = "Jan"},
new CourseVm {Number= "101", Name= "Chemistry", Instructor = "Sal"},
new CourseVm {Number= "102", Name= "Biology", Instructor = "San"},
new CourseVm {Number= "103", Name= "History", Instructor = "Jack"},
new CourseVm {Number= "104", Name= "Maths", Instructor = "Rahul"}
};
var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
var serializeCourses = JsonConvert.SerializeObject(courses, settings);
return serializeCourses;
}
public string GetSerialisedInstructors()
{
var instructors = new[]
{
new InstructorsVm {Name= "Jan", Email= "jan.test#test.com", Roomno = "10"},
new InstructorsVm {Name= "Pal", Email= "pal.test#test.com", Roomno = "9"},
new InstructorsVm {Name= "San", Email= "san#test.com", Roomno = "11"},
new InstructorsVm {Name= "Jack", Email= "jack#test#test.com", Roomno = "12"},
new InstructorsVm {Name= "Rahul", Email= "rahul#test#test.com", Roomno = "15"}
};
var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
var serializeInstructors = JsonConvert.SerializeObject(instructors, settings);
return serializeInstructors;
}
}
}

Answer 1

Are you sure this is the index view?
#model AngularJSMvcExample.Models.RegistrationVm
#{
ViewBag.Title = "Registration";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container" ng-controller="RegistrationController">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li>
<span class="navbar-brand">Registration</span>
</li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-bar">
<li >Browse Catalog</li>
<li>Browse Instructors</li>
</ul>
</div>
</div>
</div>