Calling href with Angular to open modal

Context

I am working on this Tutorial , it is CRUD with DataTable, but the difference is I am using Asp.Net WebApi with Angular

In step 9, where the tutorial made partial views for the popup, but I am not using the partial view, I am using Angular Views instead

Problem

I don't know how to replace this partial view for my Angular View

code

View

<table class="table table-striped table-hover table-bordered dt-bootstrap no-footer" id="tabla_catalogos" role="grid" aria-describedby="sample_editable_1_info">
  <thead>
    <tr>
      <th class="hidden"></th>
      <th style="width: 200px;"> Codigo </th>
      <th> Nombre </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

      

        
        
        
      

    

Js

    $('#tabla_catalogos')
        .DataTable({
            searching: true,
            dom: 'ftpB',
            autoWidth: false,
            buttons: [
                //'excelHtml5', 'csv', 'print'
            ],
            paging: true,
            select: {
                style: 'single'
            },
            info: false,
            ordering: true,
            "processing": true,
            ajax: {
                method: 'GET',
                url: "../../api/Catalogo/GetCatalogoRegistro/" + selected.ID,
                dataSrc: '',
                beforeSend: function(request) {
                    request.setRequestHeader("Version", $scope.usuario.Version);
                    request.setRequestHeader("Origen", 'Web');
                }
            },
            columns: [
            { data: 'Catalogo', visible: false, searchable: false },
            { data: 'Codigo' },
            { data: 'ID', visible: false, searchable: false },
            { data: 'Nombre' },
            { data: 'Padre', visible: false, searchable: false },
            {
                data: 'ID',
                render: function(data){
                    return '<a class="popup" href="root.detalleregistros'+data+'">Editar</a>';
                }
            },
             {
                 data: 'ID',
                 render: function (data) {
                     return '<a class="popup" href="root.detalleregistros' + data + '">Eliminar</a>';
                 }
             }

            ],
            pageLength: 10 //,
            //pagingType: "simple_numbers"
            ,
            language: {
                "emptyTable": "No se encontraron registros",
                "zeroRecords": "No encontraron coincidencias",
                "search": "Buscar: "
            }
        });

    $('.tablecontainer').on('click', 'a.popup', function (e) {
        e.preventDefault();
        OpenPopup($(this).attr('href'));
    });

    function OpenPopup(pageUrl) {
        var $pageContent = $('<div/>');
        $pageContent.load(pageUrl, function () {
            $('#popupForm', $pageContent).removeData('validator');
            $('#popupForm', $pageContent).removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse('form');

        });

        $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                  .html($pageContent)
                  .dialog({
                      draggable: false,
                      autoOpen: false,
                      resizable: false,
                      model: true,
                      title: 'Popup Dialog',
                      height: 550,
                      width: 600,
                      close: function () {
                          $dialog.dialog('destroy').remove();
                      }
                  })

        $('.popupWindow').on('submit', '#popupForm', function (e) {
            var url = $('#popupForm')[0].action;
            $.ajax({
                type: "POST",
                url: url,
                data: $('#popupForm').serialize(),
                success: function (data) {
                    if (data.status) {
                        $dialog.dialog('close');
                        oTable.ajax.reload();
                    }
                }
            })

            e.preventDefault();
        })
        $dialog.dialog('open');
    }

};

      

        
        
        
      

    

Angular Service, call view:

.state('root.detalleregistros', {
                 url: "detalleRegistros.html",
                 templateUrl: "../SPA/administrador/catalogos/detalleRegistros.html",
                 controller: "detalleRegistrosCtrl",
                 authenticate: true
             })

      

        
        
        
      

    

When I clic in url as mi code '<a class="popup" href="root.detalleregistros'+data+'">Editar</a>';

it redirects me tohttp://localhost:55720/admin/root.detalleregistros/1

instead

http://localhost:55718/admin/#/detalleRegistros.html

What am I doing there? help is greatly appreciated. Relations

I'm trying '<a class="popup" ui-sref="root.detalleregistros({data:11})">Editar</a>';

as @Agam Banga's comment but the modal just won't open, do I need to add something to the table view? or what could be wrong there?