Different ways to bind Elements to Model in AngularJs

Different ways to Bind Elements to Model/ Directives

You can bind the Angular Elements to the Model in the following ways.

  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>

1. Remove the x- or data- from the start of the element attributes.
   e.g data-ng-bind and x-ng-bind can be written as ng-bind
   
2. Convert the delimiters like :, -, _ to camelCase.
   Since the Html is case insensitive you can not use camelCase and you can use delimiters like :, -, _ to write your directives/angular .
   

So the above ways are
Following example in the Plunk shows the various ways to write our angular directive.




Now most of the above code works perfectly with angular js but they may cause HTML validation to fail. So if you want your code to be Html validatable then you should use

 <span data-ng-bind="name"></span>