Multiple ng-controller in Angular.js is not working

Question

I got struck in using 2 controllers for a module. I want to do seperate actions according to the controllers defined for a module. I`m not getting the output as expected for the second controller.

Please find the below method makes sense.

var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [
        { 'companyName':'Infi',
            'Level': 1,
            'Created': 'Bangalore','Status': 'In Progress'},
            { 'companyName':'Cogi',
            'Level': 1,
            'Created': 'Bangalore','Status': 'In Progress'},
                { 'companyName':'Infosys Technologies',
            'Level': 1,
            'Created': 'Bangalore','Status': 'In Progress'},
                    { 'companyName':'Infosys Technologies',
            'Level': 1,
            'Created': 'Bangalore','Status': 'In Progress'},
                        { 'companyName':'Infosys Technologies',
            'Level': 1,
            'Created': 'Bangalore','Status': 'In Progress'},
        ];


});

helloApp.controller("SectionController", function($scope) {
$scope.rightsection = [
        { 'Topic':'Bobs Pizza',
            'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache ' },
            { 'Topic':'Bill`s Jugs',
            'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '},
                { 'Topic':'Bobs Pizza',
            'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '},
                    { 'Topic':'Bill`s Jugs',
            'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '},
                        { 'Topic':'Bobs Pizza',
            'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '}
        ];

});

When I try to use the second controller,(below) I`m not seeing anything displayed on the page. Is the above method is wrong? If so, how do I add two controllers to a single module? Please help me.

<div class="right" ng-controller="SectionController">
<table class="table" id="tl" ng-repeat="section in rightSection">
<tr>
<th>Company Name
</th>

</tr>
<tr>
<td>{{section.Topic}}
</td>

</tr>
</table>
</div>

Answer 1

Look this. In the div you not add ng-app attribute and the change de var scope name to rightSection.

var helloApp = angular.module("helloApp", []);

helloApp.controller("CompanyCtrl", function($scope) {
  $scope.companies = [{
    'companyName': 'Infi',
    'Level': 1,
    'Created': 'Bangalore',
    'Status': 'In Progress'
  }, {
    'companyName': 'Cogi',
    'Level': 1,
    'Created': 'Bangalore',
    'Status': 'In Progress'
  }, {
    'companyName': 'Infosys Technologies',
    'Level': 1,
    'Created': 'Bangalore',
    'Status': 'In Progress'
  }, {
    'companyName': 'Infosys Technologies',
    'Level': 1,
    'Created': 'Bangalore',
    'Status': 'In Progress'
  }, {
    'companyName': 'Infosys Technologies',
    'Level': 1,
    'Created': 'Bangalore',
    'Status': 'In Progress'
  }, ];


});

helloApp.controller("SectionController", function($scope) {
  $scope.rightSection = [{
    'Topic': 'Bobs Pizza',
    'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '
  }, {
    'Topic': 'Bill`s Jugs',
    'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '
  }, {
    'Topic': 'Bobs Pizza',
    'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '
  }, {
    'Topic': 'Bill`s Jugs',
    'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '
  }, {
    'Topic': 'Bobs Pizza',
    'Comment': 'Raw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache '
  }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="right" ng-app="helloApp" ng-controller="SectionController">
  <table class="table" id="tl" ng-repeat="section in rightSection">
    <tr>
      <th>Company Name
      </th>

    </tr>
    <tr>
      <td>{{section.Topic}}
      </td>

    </tr>
  </table>
</div>

Answer 2

Your iterating over rightSection and your scope variable is rightsection (it's case sensitive).