KendoUI Switch control with AngularJS

Question

I am trying to use kendo UI's switch control (http://demos.telerik.com/kendo-ui/web/mobile/switch.html) with angularjs. I am having problem that the value is not being bound with model. I am using it like this:

<input type="checkbox" id="locked" kendo-mobile-switch on-label="Yes" off-label="No" ng-model="Model.IsLocked" checked="{{Model.IsLocked}}" data-role="switch">

Basically the variable in model keep the value received from db irrespective of the state on UI.

Second problem I am having is with on and off labels that it keeps on displaying default On and Off.

Answer 1

I opened an issue on the github site and a fix was applied. See this link:

"I pushed a fix, it should work now if you use k-ng-model. The plain ng-model is still broken."

https://github.com/kendo-labs/angular-kendo/issues/333

Answer 2

The second problem (the on/off labels) is because it should be:

k-on-label="'Yes'" k-off-label="'No'"

Note the string literals, otherwise it is interpreted as a variable.