Pass data from controller to directive angularjs

Question

I am trying to pass data from controller to directive for dynamically updating rows in a table. but the table is not getting updated and no error is being shown in console.

This is my html:

$<div ng-app="roleManagement" ng-controller="RoleManagementCtrl">
<h1> Role Management</h1><hr/>
<div class="container-fluid">
    <form >
        <div class="form-group row">
        <button type="button" class="btn btn-primary col-md-1" 
         ng-click="query(roleId, userId)">Query</button>
         <button type="button" class="btn btn-primary col-md-2 col-md-offset-               
         1">Edit Role</button>
</div>

<div class="form-group row">
    <label class="col-md-1" >Role ID</label>
    <select class="col-md-2 col-md-offset-1" ng-model="roleId">
    <option></option>
    <option ng-repeat="roleID in roleIDS | unique :roleID">{{roleID}}</option>
    </select>
</div>

<div class="form-group row">
    <label class="col-md-1">User ID</label>
    <select class="col-md-2 col-md-offset-1" ng-model="userId">
        <option></option>
        <option ng-repeat="userID in userIDS | unique :userID">{{userID}}          
        </option>
    </select>
</div>
</form>
</div>
<hr/>


<div ng-controller="RoleManagementCtrl">
    <my-table users = 'users'></my-table>
</div>
</div>

This is my controller and directive. I am trying to pass $scope.users through controller to directive:

$'use strict';
angular.module('roleManagement', ['angularUtils.directives.dirPagination'])
    .controller('RoleManagementCtrl', ['$scope', '$http', 'localStorageService',    
    function($scope, $http, localStorageService) {
    var init = function () {
        $http({
        method: 'GET',
        url: 'http://172.16.0.26:7001/Taisys_Server_Current/getAllRoles',
        headers: {'X-Auth-Token': localStorageService.get('jwtTokens')}
        }).success(function (response) {
        $scope.roleIDS = response;
        });
        $http({
        method: 'GET',
        url: 'http://172.16.0.26:7001/Taisys_Server_Current/getAllUsers',
        headers: {'X-Auth-Token': localStorageService.get('jwtTokens')}
        }).success(function (response) {
        $scope.userIDS = response;
        });
        };
        init();
        $scope.query = function (roleId, userId) {
        $scope.url =      
        'http://172.16.0.26:7001/Taisys_Server_Current/getRoleData?';
        if (roleId == undefined) {
            $scope.url  += 'roleID=';
            }
        else {
            $scope.url  += 'roleID=' + roleId;
            }
        if (userId == undefined) {
            $scope.url  += '&userID=';
        }
        else {
            $scope.url  += '&userID=' + userId;
        }
        $http({
        method: 'GET',
        url: $scope.url ,
        headers: {'X-Auth-Token': localStorageService.get('jwtTokens')}
        }).success(function (response) {
        $scope.users = response;
        })
        };
  }]).directive('myTable', function () {
  return {
      restrict: 'E',
      link: function (scope, element, attrs) {
      var html = '<table>';
      html += '<th>Role Name</th>';
      html += '<th>Role ID</th>';
      html += '<th>User Name</th>';
      html += '<th>User ID</th>';
      angular.forEach(scope[attrs.users], function (user, index) {
          if ('users' in user) {
              angular.forEach(user.users, function (use, index) {
              html +='<tr>';
              html += '<td>' + user.roleName + '</td>';
              html += '<td>' + user.roleID + '</td>';
              html += '<td>' + use.userName + '</td>';
              html += '<td>' + use.userID + '</td>';
              html +='</tr>'
              })
            }
          }
      );
      html += '</table>';
      element.replaceWith(html);
    }
  }
});

Answer 1

.directive('myTable', function () {
  return {
      restrict: 'E',
      scope:{users:'=users'}
      link: function (scope, element, attrs) {
      var html = '<table>';
      html += '<th>Role Name</th>';
      html += '<th>Role ID</th>';
      html += '<th>User Name</th>';
      html += '<th>User ID</th>';
      angular.forEach(users, function (user, index) {
          if ('users' in user) {
              angular.forEach(user.users, function (use, index) {
              html +='<tr>';
              html += '<td>' + user.roleName + '</td>';
              html += '<td>' + user.roleID + '</td>';
              html += '<td>' + use.userName + '</td>';
              html += '<td>' + use.userID + '</td>';
              html +='</tr>'
              })
            }
          }
      );
      html += '</table>';
      element.replaceWith(html);
    }
  }
});