dynamic - How to make ng-click dynamically added into table from a modal to work? AngularJS -

i received project contains angularjs in it, need someting , don´t doing wrong since i'm noob in angularjs matters.

the context:

this part of whole project, angular files in project configured gulp.
have html page(page1.html) has button , table, html controlled ng-controller(controller.js), in html have button ng-click function.
function opens $uibmodal has own controller , templateurl. templateurl in html file inside <script></script> tag.
controller of modal(controller2) in same file main controller(controller1) when modal opens see 1 text input, enter text press add button, modal closes , in main html page 1 row of table added entered text in text input.

the problem:

the table on each row next text has 2 buttons ng-click functions, 1 delete 1 edit, when rows added beginning of compilation work fine, when rows dynamically added modal don't anything. have read questions similar problems $compile service work, not know how apply on case.

any enormously appreciated.

the html file

<div ng-controller="createobscontroller">     <script type="text/ng-template" id="add-observations.html">         <div class="modal-header">             <h3 class="modal-title">{{ modaltitle }}</h3>         </div>         <div class="modal-body">             <form class="form-horizontal" novalidate name="form">                 <div class="form-group">                     <label for="inputtype" title="item" class="control-label col-md-2">item</label>                     <div class="col-md-3 col-sm-3 col-xs-12">                         <input type="text" title="ingrese item" id="txtidobs" class="form-control " value="{{count}}">                     </div>                 </div>                 <div class="form-group">                     <label for="inputtype" title="observation" class="control-label col-md-2">observation</label>                     <div class="col-md-10">                         <textarea title="enter observation" ng-maxlength="50" ng-model="observacionadd" id="observationdetail" class="form-control custom-control " rows="3" style="resize:none" placeholder="observation" required></textarea>                     </div>                 </div>             </form>         </div>         <div class="modal-footer">                         <button class="btn btn-primary" type="button" ng-click="tablaobsaddone()()"                     button-spinner="isprocesando">                 add obs             </button>         </div>     </script>       <script>         //work if rows in html before executing page.         function removeobservation(idx) {             var row = document.getelementbyid(idx);             row.parentnode.removechild(row);         }     </script>     <br />      <div class="panel panel-primary">         <div class="form-horizontal ">             <div class="panel-heading col-md-11" style="background-color:#2196f3; color:white; max-width: 88%; box-shadow: 1px 5px 20px #ccc;" ng-click="panecollapseobs=!panecollapseobs">                  <span >observations</span>                 <i class="pull-right fa" ng-class="panecollapseobs ? 'fa-chevron-down' : 'fa-chevron-left'"></i>             </div>             <div class="col-md-1" align="left">                 <button type="button" title="add observation" class="btn btn-primary btn-md" style="font-size:20px; background-color:#2196f3;" ng-click="addobservation()">+</button>             </div>             <div class="panel-body" style="float: left; padding-top: 0px; box-shadow: 1px 15px 30px #ccc; max-width: 98%;" ng-hide="panecollapseobs">                 <br />                 <form class="form-horizontal">                     <div class="form-group">                     </div>                     <div class="container-fluid table-responsive table-descrec espacio">                         <div class="row col-md-12 col-sm-12 col-xs-12">                             <table id="tableobservations" class="table table-striped table-condensed table-bordered table-hover table-parametros ">                                 <thead>                                     <tr class="fondofila colorletras">                                         <th class="col-md-1 col-xs-2 text-center">                                              <label title="item">item</label>                                         </th>                                         <th class="text-left col-md-9 col-sm-offset-1 ellipsis">                                              <label title="observation">observation</label>                                         </th>                                         <th class="text-center col-md-1 col-sm-1 col-sm-offset-1 col-xs-2">                                              <label title="edit">edit</label>                                         </th>                                         <th class="text-center col-md-1 col-sm-1 col-sm-offset-1 col-xs-2">                                              <label title="delete">delete</label>                                         </th>                                     </tr>                                  </thead>                             </table>                         </div>                     </div>                 </form>             </div>         </div>     </div> </div> 

the controller file

    (function () {     'use strict';     function createobscontroller($scope, $rootscope, $compile, $log, $filter, $timeout, $state, toaster, authservice, hash,         $uibmodal, uigridconstants, i18nservice, blockui, $window, $document, ruthelper) {                 $scope.init = init;                 $scope.addobservation = addobservation;         $scope.removeobservation = removeobservation;         function removeobservation(idx) {             var row = document.getelementbyid(idx);             row.parentnode.removechild(row);         }          function addobservation() {             $uibmodal.open({                 animation: true,                 templateurl: 'add-observations.html',                 controller: 'modaladdobscontroller',                 backdrop: 'static',                 size: 'lg',                  resolve: {                                }             });         }         function clear() {             $scope.panecollapseobs = true;         }         function init() {             clear();         }         $scope.init();     };     angular        .module(configdata.nameapp)        .controller('createobscontroller', createobscontroller);     createobscontroller.$inject = ['$scope', '$rootscope', '$compile','$log', '$filter', '$timeout', '$state',         'toaster', 'authservice', 'hash', '$uibmodal', 'uigridconstants', 'i18nservice', 'blockui', '$window', '$document', 'ruthelper'];  })();  (function () {     'use strict';     function modaladdobscontroller($rootscope, $scope, $timeout, $log, $uibmodalinstance, authservice, toaster, $window, hash, $document) {         $scope.modaltitle = 'observations';         $scope.tablaobsaddone = tablaobsaddone;                 $scope.addobservaciones = addobservaciones;         $scope.count = rowcountobservations();          function addobservaciones() {             var table = document.getelementbyid("tableobservations");             var row = table.insertrow(-1);             row.classname = "text-center";             row.id = 'filaobs' + (rowcountobservations() - 1);             var cell1 = row.insertcell(0);             var cell2 = row.insertcell(1);             var cell3 = row.insertcell(2);             var cell4 = row.insertcell(3);             cell1.classname = "col-md-1 col-xs-2 text-center";             cell2.classname = "text-left col-md-9 col-sm-offset-1 ellipsis";             cell3.classname = "text-center col-md-1 col-sm-1 col-sm-offset-1 col-xs-2";             cell4.classname = "text-center col-md-1 col-sm-1 col-sm-offset-1 col-xs-2";             cell1.innerhtml = rowcountobservations() - 1;             cell2.innerhtml = document.getelementbyid("observationdetail").value;             cell3.innerhtml = '<button class="btn btn-xs btn-info btn-ico" ng-click="editobservacion(filaobs' + (rowcountobservations() - 1) + ')"><i class="material-icons" style="font-size:24px">edit</i></button>';             cell4.innerhtml = '<button class="btn btn-xs btn-danger btn-ico" ng-click="removeobservation(filaobs' + (rowcountobservations() - 1) + ')"><i class="material-icons" style="font-size:24px">delete</i></button>';             observationdetail.value = "";             txtidobs.value = rowcountobservations();         }         function rowcountobservations() {             var x = document.getelementbyid("tableobservations").rows.length;             return x;         }         function tablaobsaddone() {             var table = document.getelementbyid("tableobservations");             if (document.getelementbyid("observationdetail").value.length != 0) {                 addobservaciones();                 $uibmodalinstance.close('ok');             } else {                 alert("enter text");             }         }     }     angular     .module(configdata.nameapp)     .controller('modaladdobscontroller', modaladdobscontroller);     modaladdobscontroller.$inject = ['$rootscope', '$scope', '$timeout', '$log', '$uibmodalinstance', 'authservice', 'toaster', '$window', 'hash', '$document']; })(); 

when trigger insert changes dom problem angular have no idea states changed. not sure in case can try this. $apply make angular know changes outside angular world.

function tablaobsaddone() {             var table = document.getelementbyid("tableobservations");             if (document.getelementbyid("observationdetail").value.length != 0) {                 $scope.$apply(function() {                    addobservaciones();                 })                 $uibmodalinstance.close('ok');             } else {                 alert("enter text");             }         } 

but why don't use "ng-repeat" on table

$scope.data = [    name: 'test',    value: 'test', ] // store here data; $scope.actionedit = function($index) {    //code; }  $scope.actiondelete = function($index) { //code; }  <tbody> <tr data-ng-repeat="item in data track $index">    <td>{{item.name}}</td>   <td>{{item.value}}</td> <td><button data-ng-click="actionedit($index)">edit</button></td> <td><button data-ng-click="actiondelete($index)">delete</button></td> </tr> </tbody> 

and here just:

function tablaobsaddone() {             var table = document.getelementbyid("tableobservations");             if (document.getelementbyid("observationdetail").value.length != 0) {                 $scope.data.push({                   name: 'test1',                   value: 'test2'                 });                 $uibmodalinstance.close('ok');             } else {                 alert("enter text");             }         } 

this 1 example of can do.

but more details read more angular directives ng-repeat , others make life easier.