Angular Directives using ngModelController
A simple control: rating
Let us build a simple control, a rating widget, intended to be used as:
No fancy CSS for now; this would render as:
Clicking on a number selects that rating; and clicking the "x" sets the rating to null.
1. Implement ngModel.$render to transfer the model's view value to your view.
2. Call ngModel.$setViewValue() whenever you feel the view value should be updated.
Note 1: In order not to overcomplicate the implementation, the rating values are inserted in an array - the ctrl.options. This is not needed; a more efficient, but also more complex, implementation could use DOM manipulation to insert/remove ratings when min/max change.
Note 2: With the exception of the '<' scope bindings, this example can be used in Angular < 1.5. If you are on Angular >= 1.5, it would be a good idea to transform this to a component and use the $onInit() lifecycle hook to initialize min and max, instead of doing so in the controller's constructor.