javascript - Conditional model binding in AngularJS -

i trying create calendar has default template of 'available hours' in day, , allow user edit particular day assigned number of hours.

so basically:

team 1:
sunday: 8
monday: 8
tuesday: 8
wednesday: 8
thursday: 8
friday: 8
saturday: 8

i have edited angularui bootstrap datepicker directive allow me create datepicker input box under each day show current hours available day , allow user enter custom value.

i store default template in database each team, , have table date , hours. table used check if date requesting has additional hours allotted or should use default template.

i can make work on server side, making work in client escaping me.

i need populate values of datepicker input boxes default template values unless value date exists in custom table. can make work, problem comes in when try edit of this. if set ng-model custom template, bind on dates there entry. if don't set model, don't know how add entry custom object date.

here plunk shows happens if try model bind:

<div style="display:inline-block; min-height:290px;">     <datepicker default-hours="vm.defaulthours" show-weeks="false" ng-model="controller.dt" class="well well-sm" custom-class="getdayclass(date, mode)"></datepicker> </div> 

(you have click on date enable editing of days hours)

http://plnkr.co/edit/l1gsnukd4ey35qha1xl0?p=preview

you can see day shows entry 1 value in customtemplate attribute(line 68 of custombootstrap.js)

and here plunk shows how can display either default template or custom template hours, don't know how update custom object when change value:

(you have click on date enable editing of days hours)

http://plnkr.co/edit/pzh5l4ztuuhdkzzdzcfx?p=preview

if can think of better way go this, i'm open suggestions, need able have default template, , allow specific date configurations (preferably without having make database entry every date every team).

thank insight.