What I want to achive? When addComment sends info to profile I want comment box to update (add new comment - works fine!) and scroll down to show new comment (scroll doesn't work).
My idea for solving problem: Set up a lifecycle hook that listen for changes, namely $onChanges. When that occures fire well known scroll function.
All works when I change comments in profile component but when change comes from child component (addComment) nothing happens and $onChanges doesn't trigger even though the change is visible in the view (comment is added).
Part of components tree: components tree
Code:
Parent Component - profile (responsible for logic - component controller)
angular.module('myApp')
      .component('profile', {
        templateUrl: 'views/profile.html',
        controller: function (fetchData) {
          var vm = this;
          //Adds new comment to person object
          function addcomment(author, text){
            console.log('Pushed');
            var d = new Date(),
                avatar = author.toLowerCase().split(" ").join("");
            this.person.comments.push({
              author: author,
              avatar: 'images/' + avatar + '.jpg',
              creationDate: d.getTime().toString(),
              text: text
            });
          }
          this.addcomment = addcomment;
          fetchData.then(function(data) {
            vm.person = data[0];
          });
        }
    });
Child#1 component - addComment (Responsible for sending data(new comment) to parent controller)
angular.module('myApp')
    .component('addComment', {
      templateUrl: 'views/addComment.html',
      bindings: {
        onAddComment: '&'
      },
      controller: function(){
        this.text = "";
        this.author = "Test";
      }
    });
Child#2 component - commentBox (responsible for displaying comments in a box)
angular.module('myApp')
    .component('commentBox', {
      templateUrl: 'views/commentBox.html',
      bindings: {
        comments: '<',
        commentCount: '<'
      },
      controller: function() {
        this.$onChanges = function (changesObj) {
          //place to triger scroll function
          console.log('Changed');
          if (changesObj) {
            console.log('changed!');
          }
        };
      }
    });
