Update textfield value with ajax data using angular js

I am using angular js directives for bootstrap. What i am trying for is to create an edit form on bootstrap modal when user clicks on edit button from list of items. Here is my code:

HTML:

<div class="modal-header">
            <h3>Edit Template</h3>
        </div>
        <div class="modal-body">
            <form name="form" class="form-horizontal" novalidate>
                <fieldset>
                    <div class="span4" ng-class="smClass" ng-show="etemplate.status">{{etemplate.status}}</div>
                    <div class="control-group">
                        <label class="control-label" for="etemplateName">Name</label>
                        <div class="controls">
                            <input class="input-xlarge" id="etemplateName" ng-model="eTemplate.name" maxlength="150" type="text" required />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="etemplateDesc">Description</label>
                        <div class="controls">
                            <textarea id="templateDesc" id="etemplateDesc" ng-model="eTemplate.desc"></textarea>
                        </div>
                    </div>
                    <div class="center">
                      <input type="text" style="display:none;" ng-model="eTemplate.id" value="{{eTemplate.id}}" required />
                      <button type="button" ng-click="update(eTemplate)" class="btn btn-primary" ng-disabled="form.$invalid || isUnchanged(eTemplate)">Submit</button>
                      <button class="btn" ng-click="cancel()">Cancel</button>
                    </div>
                </fieldset>
            </form>
        </div>

Controller:

controller('TemplateController', ['$scope', '$http', '$modal', function($scope, $http, $modal) {
    var tmpId = '';
    $scope.openEdit = function(id) {
        tmpId = id;
        var editTmpModalInstance = $modal.open({
            templateUrl: 'editTemplateContent.html',
            controller: 'ETModalInstance'
        });

        $http({
            method: 'GET',
            url: adminBaseUrl+'/get_template/',
            params: {'id': tmpId}
            }).
            success(function(data, status, headers, config) {
                $scope.$broadcast('EditTemplateDataReached', data);
            }).
            error(function(data, status, headers, config) {
            });
    }
}]).

controller('ETModalInstance', ['$scope', '$http', '$modalInstance', function($scope, $http, $modalInstance) {
    $scope.emaster = {};
    $scope.smClass = '';
    $scope.eTemplate = {};

    $scope.$on('EditTemplateDataReached', function(data) {
        $scope.eTemplate = data;
        $scope.$apply();
    });

    $scope.isUnchanged = function(eTemplate) {
        return angular.equals(eTemplate, $scope.master);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.update = function(eTemplate) {
        var strng = $.param(eTemplate);
    };
}]).

My work around for achieving this is when user clicks on edit button id of selected item is passed in my controller which sends an ajax request to server and then fill the fields with respective values. However my fields are not populated when ajax data is returned.