title: angular 1.5 component binding not updated from certain events
body: <p>I have an angular 1.5 component (i.e. myCarousel: it wraps a bootstrap carousel) that triggers an event and exposes it with a function binding.
  A parent container (i.e. myContainer) component binds a function to that event and modifies some inner state when triggered.
  Another child-component of the parent container is bound to the container's inner state.</p>
  
  <p>The problem:</p>
  
  <p>When I trigger the event on myCarousel from a button click event, everything works fine and I can see the child-component's binding being updated.</p>
  
  <p>However, when I trigger the event from a carousel slide event (slide.bs.carousel), the binding does not get updated.</p>
  
  <p>Here's a plunker to demonstrate:
  <a href="https://plnkr.co/edit/AHxaX8o0sE94Nfir7DVB" rel="nofollow noreferrer">https://plnkr.co/edit/AHxaX8o0sE94Nfir7DVB</a></p>
  
  <p>Can anyone explain why this is happening and how to solve this?</p>
  
  <p>Some relevant code:</p>
  
  <pre><code>mainApp.component("myCarousel", {
    templateUrl: "myCarousel.html",
    bindings: {
      onEventTriggered: "&amp;"
    },
    controllerAs: "vm",
    controller: function() {
      let vm = this;
      vm.$onInit = function() {
        console.log("init!");
        $("#theCarousel").carousel();
        $("#theCarousel").on("slide.bs.carousel", (event) =&gt; {
          console.log("sliding " + event.direction);
          vm.onEventTriggered();
        });
      };
    }
  });
  
  mainApp.component("myContainer", {
    templateUrl: "myContainer.html",
    controllerAs: "vm",
    controller: function() {
      let vm = this;
      vm.counter = 0;
      vm.triggerEvent = function() {
        console.log("event!");
        vm.counter++;
  
      }
    }
  });
  
  mainApp.component("childComponent", {
    template: "&lt;div&gt;Event {{vm.attribute}}&lt;/div&gt;",
    controllerAs: "vm",
    bindings: {
      attribute: "&lt;"
    }
  });
  </code></pre>