MVC allows for a clean and testable separation between the behavior (controller) and the view (HTML template). A Controller is just a JavaScript class which is grafted onto the scope of the view. This makes it very easy for the controller and the view to share the model.

The model is a set of objects and primitives that are referenced from the Scope ($scope) object. This makes it very easy to test the controller in isolation since one can simply instantiate the controller and test without a view, because there is no connection between the controller and the view.

Source

Demo

Things to notice

• The controller is defined in JavaScript and has no reference to the rendering logic.
• The controller is instantiated by Angular and injected into the view.
• The controller can be instantiated in isolation (without a view) and the code will still execute. This makes it very testable.
• The HTML view is a projection of the model. In the above example, the model is stored in the board variable.
• All of the controller's properties (such as board and nextMove) are available to the view.
• Changing the model changes the view.
• The view can call any controller function.
• In this example, the setUrl() and readUrl() functions copy the game state to/from the URL's hash so the browser's back button will undo game steps. See deep-linking. This example calls $watch() to set up a listener that invokes readUrl() when needed.