Two way data binding in AngularJS Directives

I don't know why you are triggering the $apply method manually because you actually don't need it.

I edited the example you used from the Angular page and included the input.It works for me: http://jsfiddle.net/6HcGS/2/

HTML

<div ng-app="zippyModule">  <div ng-controller="Ctrl3">    Title: <input ng-model="title">    <hr>    <div class="zippy" zippy-title="title"></div>  </div></div>​

JS

function Ctrl3($scope) {  $scope.title = 'Lorem Ipsum';}angular.module('zippyModule', [])  .directive('zippy', function(){    return {      restrict: 'C',      replace: true,      transclude: true,      scope: { title:'=zippyTitle' },      template: '<input type="text" value="{{title}}"style="width: 90%"/>',      link: function(scope, element, attrs) {        // Your controller      }    }  });

UPDATEmaxisam is right, you have to use ng-model instead of binding the variable against the value like so:

<input type="text" ng-model="title" style="width: 90%"/>

Here is the working version: http://jsfiddle.net/6HcGS/3/

You mean something like this ?

I basically use @Flek's example.
The only difference being ng-model='title'

The trick to doing two-way binding is ng-model, and it states in the document:

ngModel is directive that tells Angular to do two-way data binding. It works together with input, select, textarea. You can easily write your own directives to use ngModel as well.

<input type="text" ng-model="title" style="width: 90%"/>

Here's a way to pass to a callback parameter in a directive. The controller template:

    <component-paging-select-directive            page-item-limit="{{pageItemLimit}}"            page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"            ></component-paging-select-directive>

The directive:

angular.module('component')    .directive('componentPagingSelectDirective', [        function( ) {            return {                restrict: 'E',                scope: {                     // using the '=' for two way doesn't work                    pageItemLimit:  '@', // the '@' is one way from controller                    pageChangeHandler: '&'                },                controller: function($scope) {                       // pass value from this scope to controller method.                     // controller method will update the var in controller scope                    $scope.pageChangeHandler({                        paramPulledOutOffThinAir: $scope.pageItemLimit                    })                }, ...

In the controller:

angular.module('...').controller(...        $scope.pageItemLimit = 0; // initial value for controller scoped var        // complete the data update by setting the var in controller scope         // to the one from the directive        $scope.pageChangeHandler = function(paramPulledOutOffThinAir) {            $scope.pageItemLimit = paramPulledOutOffThinAir;        }

Note the difference in function parameters for the directive (an object with parameter as keys), template ('unwrapped' keys from the parameter object in directive), and controller definition.