Angular.js integration with Ruby On Rails Forms

Ideally, you don't want to be mixing embedded ruby interpolation and Angular's interpolation. It's better to have ruby asynchronously serve JSON to Angular, and let Angular take care of filling in the data on the client side.

Try this, when it's a hyphen separated word, you need to put within a hash notation.

f.text_field :name, :ng => {:model => "name"}

I was working with AngularJS directives and Rails 4 in order to make the bootstrap-datepicker jquery plugin work on a Rails 4 erb template, the code that I used inside the text_field_tag is the following:

<%= text_field_tag(:start_day, nil, class: 'form-control', datepicker: 'datepicker') %>  

It's important to notice that this works with AngularJS directives, the code that you get on the DOM is as follows:

<input class="form-control" datepicker="datepicker" type="text">

I worked with the directive in the following way:

timeAdminCal.directive('datepicker', function(){      return {        restrict: 'A',        link: function ($scope, $element) {          $element.datepicker({            format: 'd/m/yyyy',            autoclose: true,            todayHighlight: true          });        }      }    });

Notice that, according to AngularJS directive docs you can restrict a class name, so you may use any class name on your text_field_tag and it will work too.

timeAdminCal.directive('datepicker', function(){      return {        restrict: 'C', // Bind DOM element by class name 'datepicker'        link: function ($scope, $element) {          $element.datepicker({            format: 'd/m/yyyy',            autoclose: true,            todayHighlight: true          });        }      }    });