Angular 2-way binding

2-way skips a cycle of digest

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" ng-controller="MyCtrl as ctrl">
    <ul class="main-level">
        <li ng-repeat="groupedItem in ctrl.groupedItems">
            {{::groupedItem.studyid }}
            <ul class="sub-level" 
                ng-if="groupedItem.items.length > 1"
                ng-repeat="nestedItem in groupedItem.items">
                    <li ng-if="groupedItem.items.length = 1">
                        {{::nestedItem.templateid || 'Default Template' }}
                    </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.main-level{
    
}

.sub-level{
    margin-left: 20px;
}

JavaScript

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

app.controller('MyCtrl', [ 
    MyCtrl
]);

function MyCtrl($scope) {
    var vm = this,
        data = [{
            'studyid': 'super awesome',
                'templateid': 'wtf'
        },
                {
            'studyid': 'awesome',
                'templateid': ''
        }, {
            'studyid': 'awesome',
                'templateid': 'custom awesome'
        }, {
            'studyid': 'outstanding',
                'templateid': ''
        }],
        groupedItems = [],
        groupedObj = _.chain(data)
            .groupBy('studyid')
            .forIn(function (items, studyid) {
            groupedItems.push({
                studyid: studyid,
                items: items
            });
        }).
        value();
    
    vm.groupedItems = groupedItems;
}