formatting form input field unbinds my ng-model

Question

I have a form that i am trying to submit with angular JS

One of the field requires generation of an ethiopian calendar , so i am using an external javascript library to show this date - available here http://keith-wood.name/calendarsRef.html

To show the date picker one creates an input text as below:

<input type="text" id="ethiopianDOB" ng-model='Ethiopian'

And corresponding javascript

$( "#ethiopianDOB" ).calendarsPicker({
    calendar: $.calendars.instance('ethiopian')
}); 

However this interferes with my ng-model binding and hence cannot access my variable in $scope (I reviewed the object on form submission and i have no item like $scope.Ethiopian

I am looking for ways to either
1. Retain the binding of the ng-model OR
2. Not require the javascript to instantiate the calendar OR
3. Improvement on my approach to this problem

Thanks

Answer 1

You should not mix JQuery and Angular if possible. Try to 'think in angular' instead of falling back on JQuery.

Here is a great post about this topic: "Thinking in AngularJS" if I have a jQuery background?

That being said, you should try to replace the JQuery calendar with an angular directive such as the datepicker from Angular UI Bootstrap. I don't know if they have an Ethopian calendar but you could always build your own.

This would fix your issue.

Hope this helps.