Angularjs how to Append an ng-repeat with data coming from a different controller

Question

I have 2 controllers, pageController.js containing the list of links and the table thead and empty tbody, and articleController.js with a directive that will append data to tbody when a link is clicked inside thead of pagesController,

here is the html file,

 <div ng-controller='pageController as pg'>
    <ul>
       <li>
           /* This table is dynamically appended */
          <a href="" sample-directive>Click Me</a> 
          <table>
             <thead>
                <tr>
                 <th>Field1</th>
                 <th>Field2</th>
               </tr> 
            </thead>
            <tbody> 
           </tbody>
        </table>
       </li>
    </ul>
</div>

articleController.js

this controller should populate the table tbody

myApp.directive("sampleDirective", function($compile, $parse, $rootScope) {
        return {

            scope: {
              id: "=",
              status: "@"
            },

            link: function($scope, $element, $attrs) {

                var clickingCallback = function() {

                  var $elem = $("#"+id);
                  $scope.articleData = [{"id":1076,"article_master_id":24,"article_name":"Testtest"},{"id":1077,"article_master_id":24,"article_name":"test2"},{"id":1078,"article_master_id":24,"article_name":"test3"}]; /* some data it has */


                   var output = angular.element("<tr ng-repeat='fld in entryC.articleData' ng-show='entryC.articleData.length'>"+
                      "<td>{{ fld.article_master_id }}</td>"+
                      "<td>{{ fld.article_name }}</td>"+
                      "<td>{{ fld.id }} {{ entryC.articleData }}</td></tr>");


                $elem.empty();
                $elem.append($compile(output)($scope));

               }

             $element.bind('click', clickingCallback);

           }
}

the <li><a sample-directive> tags belongs to pageController, when this directive is clicked, it will execute the link callback function under articleController.js,

I was able to trigger the callback function of my directive, the problem is the ng-repeat it wont get executed, and no error,

A working sample would be highly appreciated, thank you,

Answer 1

Basically your ng-repeat was not working since your template was compiled before the digest cycle completion.

When you manually compile and link the element from the run block, the $watch handlers for your element have been set up but the $digest phase has not happened yet. It is the $digest phase where the scope examines all of the $watch expressions and executes their corresponding watch handlers.

Here is a working example:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

})
.directive("sampleDirective", function($compile, $parse, $rootScope,$timeout) {
  return {

    scope: {
      id: "@appenddiv",
      status: "@"
    },

    link: function($scope, $element, $attrs) {
      var clickingCallback = function() {
        var $elem =  angular.element( document.querySelector("#" + $scope.id));
        $scope.entryC = {};
        $scope.entryC.articleData = [{
          "id": 1076,
          "article_master_id": 24,
          "article_name": "Testtest"
        }, {
          "id": 1077,
          "article_master_id": 24,
          "article_name": "test2"
        }, {
          "id": 1078,
          "article_master_id": 24,
          "article_name": "test3"
        }]; /* some data it has */


        var output = angular.element("<table class='table table-bordered table-striped'><tr ng-repeat='fld in entryC.articleData' ng-show='entryC.articleData.length'>" + "<td>{{ fld.article_master_id }}</td>" + "<td>{{ fld.article_name }}</td>" + "<td>{{ fld.id }} {{ entryC.articleData }}</td></tr></table>");

  
        $elem.empty();
        var content = $compile(output)($scope);
        $timeout(function() {
             $elem.replaceWith(content);
        });
        

      };

      $element.bind('click', clickingCallback);

    }
  };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <ul>
      <li>
        /* This table is dynamically appended */
        <div id="appenddiv">sdfsdfsfd</div>
        <a href="" appenddiv="appenddiv" sample-directive>Click Me</a>
        <table>
          <thead>
            <tr>
              <th>Field1</th>
              <th>Field2</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </li>
    </ul>
  </div>