Thanks a lot for this recording. I was able to do it as you mentioned.

But one observation, if the button element is added at the penultimate line the alert popup. Since i need an iterative new button beside each fields i have added it within the fieldset tag element. Then the alert didn't trigger.

When this button is clicked, the goal is to capture the corresponding fields object and popup a dialog window with that field details.

Please find my template code and link code as below.

Custom_temple_form:

==========================================

<div><fieldset ng-repeat="container in containers" ng-show="paintForm(container)">
  <div ng-if="(container.caption || container.captionDisplay)">
    <legend class="h4">{{container.captionDisplay || container.caption}}</legend>
    <p ng-if="::formModel._fields[container.name].help_text" title="{{::formModel._fields[container.name].help_tag}}" class="help-block" ng-bind="::formModel._fields[container.name].help_text"></p>
    <span ng-if="::formModel._fields[container.name].instructions" ng-bind-html="::formModel._fields[container.name].instructions"></span></div>
  <div class="row"><div ng-repeat="column in container.columns" class="col-md-{{::12 / container.columns.length }}">
  <div ng-switch="::f.type" ng-repeat="f in ::column.fields" id="{{::getVarID(f)}}" ng-class="::{'form-inline': isInlineForm === true }">
    <div ng-switch-when="label" ng-if="formModel._fields[f.name]" ng-show="formModel._fields[f.name].isVisible()">
      <label ng-bind="f.label"></label>
      <p ng-if="formModel._fields[f.name].help_text" title="{{formModel._fields[f.name].help_tag}}" class="help-block" ng-bind="formModel._fields[f.name].help_text"></p>
      <span ng-if="formModel._fields[f.name].instructions" ng-bind-html="::trustedHTML(formModel._fields[f.name].instructions)"></span>
  <hr class="sp_label_hr"/>
  </div>   
  <sp-form-field ng-switch-when="field" ng-if="formModel._fields[f.name]" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" default-value-setter="setDefaultValue(fieldName,fieldInternalValue,fieldDisplayValue)"></sp-form-field>
  <sp-variable-layout ng-switch-when="container" ng-init="containers=[f]"></sp-variable-layout>
  <sp-checkbox-group ng-switch-when="checkbox_container" name="f.name" form-model="formModel" containers="f.containers" glide-form="getGlideForm()" class="checkbox-container"></sp-checkbox-group>
  <sp-widget ng-switch-when="formatter" ng-if="formModel._formatters[f.id].widgetInstance" widget="formModel._formatters[f.id].widgetInstance" page="{g_form: getGlideForm()}"></sp-widget>
  <hr ng-switch-when="break" ng-show="formModel._fields[f.name].isVisible()"/>
    <button class="buttonBeforediv">${Edit}</button>
    </div></div></div></fieldset>
<div ng-attr-id="{{::formModel.table}}.do" ng-init="execItemScripts()"></div>
<button class="testButtonafterDiv">${Edit}</button></div>

====================================

Link function:

====================================

function(scope, elem){
    
    setTimeout(function () {
            
            var testbutton = elem.find(".buttonBeforediv");
            testbutton.on('click', function(event) {
                alert("TestButton buttonBeforediv");
            $(this).animate({width: "400px"}); });
            
            
        }, 0);
        setTimeout(function () {
            
            var testbutton = elem.find(".testButtonafterDiv");
            testbutton.on('click', function(event) {
                alert("TestButton testButtonafterDiv");
            $(this).animate({width: "400px"}); });
            
            
        }, 0);
    
    scope.setFocusToAttachment = function () {
        setTimeout(function () {
            var inboxArray = elem.find("a.view-attachment");
            inboxArray.focus();
        }, 100);
    }
}