AngularJS custom directive initial loading not working - angularjs

Question

You can see the working example here - or should I say, non-working example.
Basically, I'm trying to make a custom directive called yesno-group. It is a shortcut to do this over and over:
<div class="btn-group">
<button type="button" class="btn btn-default" ng-model="checkboxField" btn-radio="true">Yes</button>
<button type="button" class="btn btn-default" ng-model="checkboxField" btn-radio="false">No</button>
</div>
And here is my yesno-group directive:
myApp.directive('yesnoGroup', function () {
return {
restrict: 'A',
scope: {
field: '=',
buttonClass: '#'
},
replace: true,
template: '<div class="btn-group">' +
' <button type="button" class="{{buttonClass}}" ng-model="field" btn-radio="true">Yes</button>' +
' <button type="button" class="{{buttonClass}}" ng-model="field" btn-radio="false">No</button>' +
'</div>'
};
});
The problem is, yesno-group does not show the value on the initial load. But once you start changing the value, it gets synchronized with the ngModel field.
What am I missing?
Also, how can I make the yesno-group to accept ng-model and use it instead of field? I got that from JsFiddle-Examples - currency input, but wish to use ng-model unless it is a big hassle.
Thank you!

Answer 1

You need to use ng-class, not class.
http://jsfiddle.net/KT6Zd/12/
myApp.directive('yesnoGroup', function () {
return {
restrict: 'A',
scope: {
field: '=',
buttonClass: '#'
},
replace: true,
template: '<div class="btn-group">' +
' <button type="button" ng-class="buttonClass" ng-model="field" btn-radio="true">Yes</button>' +
' <button type="button" ng-class="buttonClass" ng-model="field" btn-radio="false">No</button>' +
'</div>'
};
});