Two way databinding in AngularJs not working with async callback - angularjs

Question

So I'm trying to build an AngularJS app and am having some troubles with two way databinding between a controller and a directive when used with an async callback. I have a page controller that pulls data from a server and then uses multiple custom form directives to edit the data. Here is my setup:
function pageController($scope, $http) {
// this is what the data will look like
$scope.controllerModel = {
obj1: {},
obj2: {}
}
$http.get('get the data').then(function(data) {
$scope.controllerModel = data; // fill in the data
$scope.$broadcast('formDataReady'); // tell the forms the data is ready
});
}
The directive:
module('blah').directive('customForm', function() {
return {
restrict: 'E',
scope: { model: '=' },
transclude: true,
replace: true,
controller: function($scope, $attrs) {
$scope.cleanModel = $scope.model ? _.cloneDeep($scope.model) : {};
$scope.reset = function() {
$scope.model = _.cloneDeep($scope.cleanModel);
};
$scope.isClean = function() {
return _.isEqual($scope.model, $scope.cleanModel);
};
// Let page controllers tell the from when the model has been loaded
$scope.$on('formDataReady', function() {
console.log('custom-form: resetting the clean model');
$scope.reset();
console.log($scope);
console.log($scope.model);
});
$scope.reset();
},
template:
'<div>' +
'<form name="form" novalidate>' +
'<div ng-transclude></div>' +
'<div class="form-actions">' +
'<button class="btn btn-primary" ' +
'ng-click="save()" ' +
'ng-disabled="form.$invalid || isClean()">' +
'Save</button>' +
'<button class="btn" ' +
'ng-click="reset()" ' +
'ng-disabled=isClean()>' +
'Cancel</button>' +
'</div>' +
'</form>' +
'</div>'
};
});
And a bit of html:
<div ng-controller="pageController">
<custom-form model="controllerModel.obj1">
<!-- inputs with ng-model to edit the data -->
</custom-form>
<custom-form model="controllerModel.obj2">
<!-- inputs with ng-model to edit the data -->
</custom-form>
</div>
The problem is that the directive's model is not updated as a result of the async callback. The really strange thing is that in the event listener on the directive, those two console.log calls seem to give contradictory information:
console.log($scope):
...
model: { object with data inside it as expected }
...
console.log($scope.model):
Object {} // empty
So in the first log the scope has the model, but $scope.model is somehow empty.
Thanks so much for any help with this. It really, really appreciated.

Answer 1

If you get your data in a resolve before the controller is instantiated, then the directive should read it from it just fine:
app.config(function($routeProvider) {
$routeProvider.route('myRoute', {
url: '/myroute',
resolve: {
getData: function($http) {
return $http.get('get the data').then(function(data) {
return data;
}
}
}
});
});
function pageController($scope, getData) {
// getData from your $http call is now available before your controller was instantiated
// and can be used by your directive
$scope.controllerModel = getData;
}
I'm not sure why the console log is giving contradictory info though