Make a datepicker with angularjs (my views are not updated) -

i wanted create datepicker using jqueryui , angularjs. want datepicker value controllers. that, created factory :

app.factory "selecteddate", ['$rootscope', ($rootscope) ->   selecteddates = {}   selecteddates.from = moment()    selecteddates.nextperiod = ->     this.from.add('days', 1);    selecteddates.previousperiod = ->     this.from.subtract('days', 1);    return selecteddates ] 

and controllers :

app.controller "dashboarddatepickerctrl", ['$scope', 'selecteddate', ($scope,selecteddate) ->    $scope.nextperiod = () ->     selecteddate.nextperiod()    $scope.previousperiod = () ->     selecteddate.previousperiod()    $scope.date = selecteddate.from ]  app.controller "otherctrl", ['$scope', 'selecteddate', ($scope,selecteddate) ->   $scope.date = selecteddate.from ] 

my html (haml) :

.row-fluid{ "ng-controller" => "dashboarddatepickerctrl" }   .span4.offset5     %span.fui-arrow-left.right10.top5.font-large.pointer{ "ng-click" => "previousperiod()"}     .control-group.inline       .input-prepend.input-datepicker         %button.btn{:type => "button"}           %span.fui-calendar         %input#datepicker-01.span2{:type => "text", "ng-model" =>"date", "datepicker" => ""}      {{ date }}      %span.fui-arrow-right.left10.font-large.pointer{ "ng-click" => "nextperiod()"}    .span3     .btn-group.choose-granularity{"data-toggle" => "buttons-radio"}       %button#by_4h.btn.btn-primary.one_month 1 month       %button#by_1h.btn.btn-primary.one_week 1 week       %button#by_5m.btn.btn-primary.one_day.active 1 day  .row-fluid   .span12{ "ng-controller" => "otherctrl" }     %h6 other ng controller     %p       {{ date.format("dd mmm, yyyy") }} 

and finish, datepicker directive :

app.directive('datepicker', (selecteddate) ->   return {     restrict: 'a'     require : 'ngmodel'     link : (scope, element, attrs, ngmodelctrl) ->       $ ->         element.datepicker({           showothermonths: true           selectothermonths: true           dateformat: "d mm, yy"           yearrange: '-1:+1'           onselect: (date) ->             selecteddate.from = moment(date)             scope.$apply();         })     } ); 

the fact is, when select date in datepicker, date on "otherctrl" or "dashboarddatepickerctrl" not change.

i thought update value of attribute of factory update other variables pointing variable.

what did miss?

jsfiddle: http://jsfiddle.net/9hzdm/6/

the problem lose reference .from property. othercontroller , dashboarddatepickerctrl starts, reference selecteddate.from. in date change handler, changing .from object in memory (selecteddate.from = ...), controllers still pointing @ old one, lost in memory ever (quite dramatic).

the easy way fix it, expose entire selecteddate in controller, , bind subproperty. way, change .from, not change .selecteddate.

in controller should go $scope.date = selecteddate; instead of $scope.date = selecteddate.**from** , in bind, should go date.from.format(...). solve problem.

if mind suggestion, there ui-bootstrap calendar directive.

i've talked little @ this answer.