The standard practice when building user interfaces is to build them top-down. Start with designing the UI and then plug in the data and behavior according to the needs. With such an approach, the UI, data, and the behavioral aspects of the app are all tightly coupled, which is a less than ideal situation!

With the MVC paradigm, things work a little differently. There is a conscious effort to design the model beforehand by looking at the UI and expected behavior, and to encapsulate the behavior aspect into the controller, thus minimizing the coupling between the controller implementation and the UI (view) that it supports.

Given these facts, we will start by identifying the model data for our app based on the feature set.


Preview of our app

angularjs bindings