Angular 2-way binding

2-way skips a cycle of digest

by dirtyd77

HTML

<script src="https://rawgit.com/lodash/lodash/2.4.1/dist/lodash.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="myApp">
    <chart-tools></chart-tools>
</div>

CSS

html, body{
    height:100%;
    width:100%;
}

p{
    background: red;
}

JavaScript

var app = angular.module('myApp', []);

app.controller('ChartToolsCtrl', ChartToolsCtrl);

ChartToolsCtrl.$inject = ['$scope'];

function ChartToolsCtrl($scope) {
    var vm =  this;
    vm.categories = ['Item1', 'Item2'];
    vm.selectedCategory = null;
   
    vm.selectCategory = function (category){
        vm.selectedCategory = category;
    }
}

angular.module('myApp')
        .directive('chartTools', ChartToolsDirective);

    ChartToolsDirective.$inject = [];

    function ChartToolsDirective() {
        var directive = {
            restrict: 'E',
            scope: {
                'category': '@',
                'studyCtrl': '=',
                'cursorCtrl': '='
            },
            controller: 'ChartToolsCtrl',
            controllerAs: 'chartToolsCtrl',
            template: '<div><ul>' +
            '<li ng-repeat="category in chartToolsCtrl.categories" ng-click="chartToolsCtrl.selectCategory(category)">' +
            '{{ category }}'  +
            '</li>' +
            '</ul>' +
            '<tag-group ng-if="chartToolsCtrl.selectedCategory" chart-tools-ctrl="chartToolsCtrl" name="{{ chartToolsCtrl.selectedCategory}}"></tag-group>' +
            '</div>'
        };
        return directive;
    }



app.controller('TagGroupCtrl', TagGroupCtrl);

TagGroupCtrl.$inject = ['$scope'];

function TagGroupCtrl($scope) {
    console.log('created');
    var vm =  this;
    vm.chartToolsCtrl = $scope.chartToolsCtrl || {};
    vm.name = $scope.name;
    
    $scope.$watch('name', function(newValue, oldValue) {
      vm.name = newValue;
        // query database
    });
}

angular.module('myApp')
        .directive('tagGroup', TagGroupDirective);

    TagGroupDirective.$inject = [];

    function TagGroupDirective() {
        var directive = {
            restrict: 'E',
            scope: {
                name: '@',
                chartToolsCtrl: '='
            },
            controller: 'TagGroupCtrl',
            controllerAs: 'vm',
           ...