Edit on
<body ng-app="app">
        <div ng-controller="ctrl">
            <my-son firstname='name' about='about'></my-son>
            <br/><br/><br/>
            <div>
                Controller Scope Variables
                <br/>
                {{name}}
                <br/>
                {{about|json}}
                <br/>
                <a href='#' ng-click='update();'>Update Through Controller</a>
            </div>
        </div>
    </body>
var app = angular.module('app', []);
            app.controller('ctrl', function ($scope) {
                $scope.name = 'Manish';
                $scope.about = {
                    age: 28,
                    lastname: 'Prakash'
                };
                $scope.update = function () {
                    $scope.about.age += 1;
                    $scope.name += ' C';
                    return false;
                };
            });
            app.directive('mySon', function () {
                return {
                    restrict: 'E',
                    scope: {
                        firstname: '=firstname',
                        my: '=about'

                    },
                    template: '<div>My Name is {{firstname}}</div><div>Age {{my.age}} Lastname {{my.lastname}}  </div><a href="#" id="update">Update Through Directive</a>',
                    link: function (scope) {
                        angular.element(document.getElementById('update')).bind('click', function () {
                            scope.$apply(function () {
                                scope.my.age += 1;
                                scope.firstname += ' D';
                            });
                            return false;
                        });
                    }
                };
            });
Rerun