First and foremost, it is highly advisable to reconsider the structure of your architecture. It is more efficient to have your view (DOM) depend on the values in your model rather than the reverse.
However, if for some reason you must proceed in this manner, here are some steps you can take:
- Develop a directive with the same name as your class
- Restrict its usage to classnames exclusively
- In the link function, instruct it to set the value
See a demo here
.directive('foo', function() {
return {
restrict: 'C',
require: '?ngModel',
link: function(scope, el, attrs, modelCtrl) {
if(modelCtrl) {
modelCtrl.$setViewValue('foo')
modelCtrl.$render()
}
}
}
})