angularjs and ng-init scope when data changes

Question

So I have a calendar application where right now the user chooses start/end dates and clicks update calendar. This populates a calendar. However, I'm having trouble including new elements in the scope. For example, instead of continually using the same function over and over again to calculate the "cell date" for some cell from the start date, week number, day of the week, etc, I want to store the cell date once into its scope and let everyone else use it. Somehow I am unable to do this despite many attempts. In the JSFiddle below, you'll notice days of the month display in the top right corner of each calendar cell. However, if you change the dates, to say a month previous, the days of the month update but the "cell date" I have displayed in the cell does not update!

For example, take "Sat Jul 05 2014". Update the dates to start at 6/1, and the far right cell is still "Sat Jul 05 2014" even though its day of the month reflects June 7! The relevant code is in "calcell" directive and "events" directive. In calcell, I set the celld as ng-init='celld=cellDate(num, start_dt, $index)'. Then in events I simply display using {{celld}}. I could get it to work by using cellDate(num, start_dt, $index) in events but I really don't want to be using the same function a million times everywhere. Is there a way I can store the cell date in the cell object and just use it in children scope and have it update when data changes? Eventually I will be passing cell date to a function to get events data for that date, then events will iterate over them to display the events data.

fiddle link

app.directive("events", function($compile, DateService) {
        return {
            restrict: "A",
            replace: true,
            scope: true,
            template: 
                    "<div>{{celld}}</div>",
            link: function(scope, element, attrs) {
                scope.DateService = DateService;
            }
        }
    });

    //calendar cell 
    app.directive("calcell", function($compile, DateService) {
        return {
            restrict: "A", 
            replace: true, 
            scope: true,
            template: 
                "<td ng-init='celld=cellDate(num, start_dt, $index)' id='{{\"td\" + DateService.getDateInt(cellDate(num, start_dt, $index))}}' \
                        realclass='{{getScopeClass(cellDate(num, start_dt, $index))}}'>\
                    <div>\
                        <a class='CellDay'>{{DateService.getMonthDay(cellDate(num, start_dt, $index))}}</a>\
                    </div>\
                    <br/>\
                    <br/>\
                    <br/>\
                    <br/>\
                    <div events></div>\
                    </div>\
                </td>",
            link: function(scope, element, attrs) {                 
                scope.DateService = DateService;
            }
        }
    }); 

Thanks!

Answer 1

I was able to make it work by putting the celld on the event tag. Not sure if that helps.

<div events ng-attr-celld='{{cellDate(num, start_dt, $index)}}'></div>

no need to replace it and the attr is the scope value.

//replace: true,
...
scope: {celld:'@'}

fiddle

And if you haven't already seen - angular ui calendar - might save you some time.