I have a segment of code needs to be reuse a lot, there for I want to just create a directive for it.

<div class="btn-group">
    <div class="input-group">
        <div class="has-feedback">
            <input type="text" class="form-control" placeholder="BLAH BLAH" ng-model="model">
                <span class="times form-control-feedback" ng-click="model=''" ng-show="model.length > 0"></span>
        </div>
    </div>
</div>

I want to use this code as template in directive. Create a directive used as follow:

<div search-Field ng-model="model" placeholder="STRING"></div>

to replace to old html, ng-model and placeholder will be as variables.

angular.module('searchField', [])  
.directive('searchField', [function () {
    return {
        scope: {
            placeholder: '@',
            ngModel: '='    
        },
        templateUrl: 'Partials/_SearchInputGroup.html'
    }
}]);


Is it the way of doing it?