Update parent controller when child controller removes an item

I have the following:

events: [ 
  { name: 'first', date: '2012-11-01' },
  { name: 'second', date: '2012-11-05' },      
  { name: 'second II', date: '2012-11-05' },
  { name: 'third', date: '2012-11-08' },
]

I want the result to be something that looks like a calendar:

  • 2012-11-01: first [x]
  • 2012-11-02
  • 2012-11-03
  • 2012-11-04
  • 2012-11-05: second [x], second II [x]
  • 2012-11-06
  • 2012-11-07
  • 2012-11-08: third [x]

I have a range function in my events controller that will create an array with dates between the min date and the max date of the events. Each date will also have an array of the events for that day.

days [ { 
         date: '2012-11-01', 
         events: [ { name: 'second', date: '2012-11-05' } ], 
       },

       {
         date: '2012-11-01', 
         events: [], 
       }, ... ];

To render it I am looping the days and then looping the events. The problem I am running into is that in the list there is a remove button [x]. The remove method which is being called on the EventController will remove the element from the main array that holds the events.

So now my question is how does the parent controller EventsController update the view when it's not rendering the events array directly?

Is it possible to use a filter to create the calendar with events and will that solve the problem of the view not updating when the child controller removes an element?

You can make use of ID for the events.

Here is simple example using array index as a ID.

html:

    {{ day.date }}: "{{ event.name }}" [×] 
events: {{ events | json }}
calendar: {{ calendar| json  }}

js:

app.controller('MainCtrl', function( $scope ) {
  $scope.events =  [ 
    { name: 'first', date: '2012-11-01' },
    { name: 'second', date: '2012-11-05' },      
    { name: 'second II', date: '2012-11-05' },
    { name: 'third', date: '2012-11-08' }
  ];

  $scope.calendar = [
    { date: '2012-11-01' },
    { date: '2012-11-02' },
    { date: '2012-11-03' },
    { date: '2012-11-04' },
    { date: '2012-11-05' },
    { date: '2012-11-06' },
    { date: '2012-11-07' },
    { date: '2012-11-08' }
  ];
  $scope.$watch('events', function(events) {
    for (var j = 0; j < $scope.calendar.length; j++) {
      $scope.calendar[j].events = [];
      for (var i = 0; i < events.length; i++) {
        if ($scope.calendar[j].date == events[i].date) {
          $scope.calendar[j].events.push( {index: i, name: events[i].name} );
        }
      }
    }
  }, true);

  $scope.removeEvent = function(index) {
    delete $scope.events[index];
    $scope.events.splice(index, 1);
  };
});