In this Tutorial I am defining Model view Controller in single html file for better understandingfor defining model and controller in another javascript file read tutorial Here.

AngularJS support MVC Architecture

MVC : Model View Controller

-Model contains the data and logic,-View contains the visual layout and presentation,-Controller connects the two.

mvc is loosely couple and we can reuse the structure of the pattern

1.Model:

-Model contains the data and logic.-Binding the view into the model.-In AngularJS, model consists of all primitive data type such as integer, string and Boolean and complex type in form of object.-Model is just a plain JavaScript object. But you can build your model from any database like SQL Server or MySQL or from JSON file.

-This directive creates new scope.-View is the DOM element which is used to present or display the data.-To display data the in the AngularJs Expressions is used,AngularJs support two-way data binding

Two-way data bind:

-Any changes to the view are immediately reflected in the model.-Any changes in the model are propagated to the view.-So it also called as MVC architecture.

Syntax and Example:

Code:

<script>
{{person.name}}
{{person.mobile}}
</script>

3.Controller:

-Model is lives inside in the Controller-Controllers in AngularJS allow you to create an isolated scope and “control” data before it is passed to the view.-In AngularJS, controller provide great control over view and model in order to fetch the data as per request and display in the view.-Controller is a coordinator between the view and the model