AngularJS: Edit item of a Table in a Modal

I'm working on a small project with a Java back-end and front-end with AngularJS and Materialize.

I already have the whole back-end running (tested with Rest-client), the problem that I have at this moment is the following:

I have a data grid, where the Edit and Delete options are shown for each item, as shown below: For the option Edit, the idea is that the selected item is loaded in a Modal and from there make the modifications (typical case).

I have the following codified for this purpose, but I have the following observations:

The selected object is loaded into the controller correctly

Column of options in the table (Delete works correctly, but I know what will happen when you want to show a confirmation dialog)

<tr ng-repeat="pln in plannings">
    ...
<td>
    <a href="#edit_modal" ng-click="editar(pln)" class="modal-trigger"><i class="material-icons">edit</i></a>
    <a href="" ng-click="eliminar(pln.alertId)"><i class="material-icons">delete</i></a>
</td>

Controller in the controller the object arrives correctly, the alert shows the attribute with its data

$scope.editar = function(planningObj) {
    alert(planningObj.alertSqlQuery);
    $scope.sqlQuery = planningObj.alertSqlQuery;
}

The Modal I'm defining it this way

<div id="edit_modal" class="modal modal-fixed-footer">

So the id of the modal corresponds to the href if I use <a></a> or with the attribute data-target if I use <button></button>

And as the Materialize documentation says, I initialize the trigger event like this:

$(document).ready(function() {
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal({
        dismissible : false, // Modal can be dismissed by clicking outside of the modal
        opacity : .5, // Opacity of modal background
        in_duration : 300, // Transition in duration
        out_duration : 200
    });
});

The problem in particular is that Modal does not load, it does not show, it does not appear. I feel that I have followed the suggested steps according to the Materialize documentation, but maybe I need some detail with AngularJS, since in another location of the application (Add records) if the modal is shown correctly.

EDIT

Well, as recommended to me by @devconcept I took a look at angular-materialize , and following the instructions who provides the documentation has worked!

I have also removed from my JavaScript all calls to $document.ready that were placed because the Materialize documentation is required for the component to work properly, but with the use of angular-materialize are no longer necessary.

My specific line happened to be this:

<a href="#edit_modal" ng-click="editar(pln)" class="modal-trigger">

to this:

<a href="#edit_modal" ng-click="editar(pln)" modal>

it was just a matter of adding the modal directive

With this resolved, it remains to be seen what else can come out. While I get to it, thank you very much for the help.