Angular: how to assign a value to a parent scope?

Question

I have an AppCtrl controller as

 scope.transaction = {} 

The index looks like

  <div class="control-group"> <label class="control-label">Date</label> <div class="controls"> <div class="control-group input-append date form_datetime"> <date-time-picker data-ng-model="transaction.date"></date-time-picker> </div> </div> </div> <div class="control-group"> <label class="control-label">Amount</label> <div class="controls"> <div class="input-append"> <input type="text" name="transactionAmount" ng-model="transaction.amount" required> </div> 

and my custom directive looks like

 angular.module('customDirectives', []).directive('dateTimePicker', function() { return { restrict: 'E', replace: true, scope: { transaction['date']: '=' # COMPILATION ERROR HERE }, template: '<div class="control-group input-append date form_datetime">'+ '<input type="text" readonly data-date-format="yyyy-mm-dd hh:ii" name="transactionDate" ng-model="transaction.date" data-date-time required>'+ '<span class="add-on"><em class="icon-remove"></em></span>'+ '<span class="add-on"><em class="icon-th"></em></span>'+ '</div>', link: function(scope, element, attrs, ngModel) { var input = element.find('input'); element.datetimepicker({ format: "yyyy-mm-ddThh:ii:ssZ", showMeridian: true, autoclose: true, todayBtn: true, pickerPosition: 'bottom-left' }); element.bind('blur keyup change', function(){ console.log('binding element'); scope.$apply(date); }); function date() { console.log('setting date',input.val()); scope.ngModel = input.val(); } date(); // initialize } } }); 

I want to assign a date value from my $scope.transaction.date directive, but it does not work as a compilation error, how can I achieve this?

Answer 1

 scope: { transaction['date']: '=' # COMPILATION ERROR HERE }, 

Must be

 scope: { transactionDate: '=' }, 

and

 <date-time-picker data-ng-model="transaction.date"></date-time-picker> 

Must be

 <date-time-picker transaction-date="transaction.date"></date-time-picker> 

Then in your directive you can call scope.transactionDate = myValue;

within the area. $ apply ();

EDIT: If you want to use the ng model in your directive, you can use

 .... restrict: 'E', require: '?ngModel', .... 

AND

 controller.$setViewValue(value); //this will in directive code where you want set the value of the ng-model bound variable. 

In HTML

  <date-time-picker data-ng-model="transaction.date"></date-time-picker>