title: Multiple Controller routed to the same page AngularJS
body: <p>I'm trying to use AngularJS in my website and I ran into the following problem. I've seen it other places, but no answers that really satisfy my question.
  I am attempting to access data from two controllers on the same page but nothing seems to be working. I am able to reach the data from one controller, and I'm able to access data from another one, but not both on the same page at the same time. They are both being accessed through the same app.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>'use strict';
  
  castitApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
              $routeProvider
                  .when('/post/', {
                      templateUrl: 'views/posts.html',
                      controller: 'PostController',
                      resolve:{
                          resolvedPost: ['Post', function (Post) {
                              return Post.query();
                          }]
                      },
                      access: {
                          authorizedRoles: [USER_ROLES.all]
                      }
                  })
              $routeProvider
                  .when('/views/main.html', {
                      templateUrl: '/views/main.html',
                      controller: 'PostController',
                      resolve:{
                          resolvedPost: ['Post', function (Post) {
                              return Post.query();
                          }]
                      },
                      access: {
                          authorizedRoles: [USER_ROLES.all]
                      }
                  })
  });
  </code></pre>
  
  <p>route_employee.js</p>
  
  <pre><code>castitApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
          $routeProvider
              .when('/employees.html', {
                  templateUrl: '/employee-place.html',
                  controller: 'EmployeeController',
                  resolve:{
                      resolvedEmployee: ['Employee', function (Employee) {
                          return Employee.get('stephen', 'name');
                      }]
                  },
                  access: {
                      authorizedRoles: [USER_ROLES.all]
                  }
              })
  
          $routeProvider
              .when('/', {
                  templateUrl: '/views/main.html',
                  controller: 'EmployeeController',
                  resolve:{
                      resolvedEmployee: ['Employee', function (Employee) {
                          return Employee.get('stephen', 'name');
                      }]
                  },
                  access: {
                      authorizedRoles: [USER_ROLES.all]
                  }
              })
      });
  </code></pre>
  
  <p>main.html</p>
  
  <pre><code>&lt;tr ng-repeat="employee in employees"&gt;
     &lt;td ng-click="get(employee.personnelNum, 'employeesof')"&gt;
  {{employee.firstName}} {{employee.lastName}}
     &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;&lt;/center&gt;   
  &lt;li class="animate-repeat" ng-repeat="post in posts"&gt;
      {{post.text}}
   &lt;/li&gt;
  </code></pre>
  
  <p>There's another class called Employee that is essentially identical to the Post class in terms of its format, with changed keywords. I've found if I change the order of imports for the javascript files it alters which one works. Also, if I change the name in <strong>.when('name'</strong> on the one that works to a dummy name, the other will start working. It seems like I can't use two controllers, and I've heard directives may be the workaround but I'm very unclear on how to actually implement it.
  Any help appreciated!</p>