Can't figure out how to call angularjs function through html page?

Question

Angular

I have a function

$scope.setSelectionRange = function(input, selectionStart, selectionEnd) {
        if (input.setSelectionRange) {
          input.focus();
          input.setSelectionRange(selectionStart, selectionEnd);
        }
        else if (input.createTextRange) {
          var range = input.createTextRange();
          range.collapse(true);
          range.moveEnd('character', selectionEnd);
          range.moveStart('character', selectionStart);
          range.select();
        }
    };

Which moves the cursor to the right place.
There is a button

<button ng-click="setCaretToPos()">Set Caret Position</button>

Which calls the function

$scope.setCaretToPos = function() {
         $scope.setSelectionRange(document.getElementById("id_code"), $scope.caretPos, $scope.caretPos);
    };

And there is a modal window

<div class="modal fade" id="id_code_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content"  >
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Close" %}"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{% trans 'Insert your page code' %}
                        </h4>
                    </div>
                    <div class="modal-body">
                    <textarea name="code" id="id_code" style="width: 100%;" rows="16"
                              data-ng-model="current_static_page_code"></textarea>
                    </div>
                    <button ng-click="setCaretToPos()">Set Caret Position</button>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary"
                                ng-click="createPage()">{% trans "Create" %}</button>
                    </div>
                    <div ng-app="" ng-controller="setCaretToPos">
                </div>
            </div>
        </div>

How can I make the function be called not on click, but when a modal window appears

Answer 1

Lots of approaches.
One of them is to create your own directive that performs the specified functionality and assign it to the desired element. Then, for example, you can use the functionality of angular-ui ( https://angular-ui.github.io/bootstrap/ ) and add a modal window (as indicated in the example). After that, when the modal window appears, your directive will work every time.
No events and operations with dom inside the controller (there are directives for operations on dom)