Angular event binding issue

See more:

C#

Javascript

HTML

PHP

jQuery

, +

Guys I am having problem problem with angular ng-Click.

My Controller:

var ParentController = function ( ) {

    this.MyEvent = function () {
        alert('foo-bar');
    };

    this.AddHTML= function () {
       $("#ButtonSec").html('<input type='button' ng-click='Parent.MyEvent()'                value='inner button'/>');
    };

};

angular.module('myApp', []).controller('ParentController', ParentController);

HTML - 1 (Works as expected button ng-click binds to 'inner button' as expected):

<div ng-app='testComponent'>
     <div id="content" ng-controller="ParentController as Parent">
       <div id="ButtonSec">
            <input type='button' ng-click='Parent.MyEvent()' value='inner button'/>
       </div>
    </div>
</div>

HTML-2 (Not working):When rendering html using Add HTML button. Event not binding to inner button as it should (important thing I can't use $scope as per client requirement)

<div ng-app='testComponent'>
     <div id="content" ng-controller="ParentController as Parent">
       <div id="ButtonSec">

       </div>
    </div>
    <input type='button' ng-click='Parent.AddHTML()' value='Add HTML'/>
</div>

Guys please help .....