angular bind value not displaying when inside controller

Hello,

I am trying to learn how to use angularJS in a SharePoint Hosted Add-in. I'm an angular newbie too, so this could be an obvious fix.

Anyway, I am trying to get some data to display in a table, but the data doesn't show up at all. I also added a silly label to the table using {{"test" + " " + "angular"}} just as a test. when I add a ng-controller attribute to the div the broswer outputs {{"test" + " " + "angular"}} but when the attribute is removed it works (display is: test angular)

<!-- begin snippet: js hide: false console: true babel: false -->

/******************************************************************************
* App.js
* Author: Sam Johnson
* 
* This file contains the program flow of the Root Cause Investigation (RCI)
* SharePoint application. The RCI app is used to identifying the root causes 
* of faults and to track solutions to these problems cause 
* 
* Revisions:
* 
******************************************************************************/
'use strict';

var hosturl;
var app = angular.module('rciApp', []);

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
    hosturl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    $('#top-left-box').html('<a href="' + hosturl + '"><img src="../Images/Spacer.png" title="Click here to return to Treeline Home"></a>');
    // initial page starts with a list of active RCI Incidents
    getIncidents('Active');
    getUserName();
});

function getIncidents(status) {
    console.log("status: " + status);

    // fake test data
    app.controller('listActive',function listActive ($scope) {
        $scope.RCIs[
            { number: '666-100-001', eventDate: new Date(2016, 4, 24), enteredDate: new Date(2016, 4, 26), status: 'Draft', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Submit RCI' },
            { number: '666-100-002', eventDate: new Date(2016, 4, 13), enteredDate: new Date(2016, 4, 13), status: 'Area Coordinator Approval', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Coordinator Approval' },
            { number: '666-100-003', eventDate: new Date(2016, 4, 18), enteredDate: new Date(2016, 4, 21), status: 'Draft', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Submit RCI' }
        ];
    });
}

// This function prepares, loads, and then executes a
// SharePoint query to get the current users information
function getUserName() {
    // Get context of app host
    var context = SP.ClientContext.get_current();
    var user = context.get_web().get_currentUser();
    context.load(user);
    context.executeQueryAsync(function success() {$('#top-right-box').html('<span class="title-text">' + user.get_title() + '<span>')},
                              function Fail(sender, args) { alert('Failed to get user name. Error:' + args.get_message()); });
}

// Function to retrieve a query string value.
function getQueryStringParameter(paramToRetrieve) {
    var params = document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

CSS Code

<!-- language: lang-css -->

    /* Apply special formatting to the links at the top. */
    body { 
      color: rgb(64,64,64);
    }

    #top-bar {
      background-image: url('../Images/wfm.png');
      background-repeat:no-repeat;
      background-position:center;
      font-family:Tahoma;
      background-color:rgb(0, 135, 82);
      color:rgb(255,255,255);
      font-size:22px;
      position: fixed;
      top: 0;
      left: 51px;
      z-index: 998;
      width:100%;
      height:50px;
    }

    .title-text {
      line-height:50px;
      padding-left:10px;
      padding-right:10px;
    }

    #top-left-box {
      background: rgb(0, 109,64) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AYXEDkqUQfMuAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAmUlEQVRIx+2VQQrCMBBFnxLQZXoblx5J8AIK7b269DguIxR+N7MRnAl0US3mb+dPfibMIyjWTVKueLL5XO1ZQS3kT0MScA/qI1CAAZic/mI+VztJOagX4AVkQJ/6gSdwAI7uKRXQekldxdOZbzGMkzPB2z2dp2wrvOGQZGsaYmC+73KSgEuF+AdwDYjvgRNwXgpj+xlbyI+HzD6iPn+MTiqhAAAAAElFTkSuQmCC)
      no-repeat center center;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 997;
      width:50px;
      height:50px;
      text-align:center;
    }

    #top-right-box {
      font-family:Tahoma;
      background-color:rgb(0, 135, 82);
      color:rgb(255,255,255);
      font-size:14px;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 999;
      width:250px;
      height:50px;
      text-align:right;
    }

    .content {
      position:fixed;
      top:80px;
      left:20px;
      width:100%;
    }

    .leftColumn {
        background-color: rgb(230,230,230);
    }

HTML Code

<!-- language: lang-html -->

<!DOCTYPE html>

<html data-ng-app="rciApp">
<head>
    <meta name="author" content="Sam Johnson">
    <meta name="description" content="The RCI app is used to identifying the root causes of faults and to track solutions to these problems cause">
    <meta name="keywords" content="RCI, Root Cause Investigation">

    <!-- Specifying legacy document modes -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Add 3rd party javascript libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="/_layouts/15/init.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript" src="/_layouts/15/SP.UserProfiles.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- Add custom CSS styles for this app -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css">

    <!-- Add custom JavaScripts for this app -->
    <script type="text/javascript" src="../Scripts/App.js"></script>

<title>Root Cause Investigation</title>

</head>
<body>
  <div id="top-left-box"></div>
  <div id='top-bar'><span class="title-text">Root Cause Investigation</span></div>
  <div id="top-right-box"></div>
  <div id="chrome_cntrl_container"></div>
  <div class="content">
    <div id="container-fluid"> 
      <div class="row">
        <div class="col-sm-2 leftColumn">
          <!-- The following content will be replaced with the user name when you run the app - see App.js -->
          <h2>Menu</h2><h2>{{"test" + " " + "angular"}}</h2>
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
          </ul>
        </div>
        <div class="col-sm-10" data-ng-controller="listActive">
          <img src="../Images/AppIcon.png" alt="RCI" >  
          <h2>{{"test" + " " + "angular"}}</h2>
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Number</th>
                <th>Event Date</th>
                <th>Entered Date</th>
                <th>Status</th>
                <th>Equipment Discription</th>
                <th>Out With</th>
                <th>Required Action</th>
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="rci in RCIs">
                <td>{{ rci.number }}</td>
                <td>{{ rci.eventDate | date:'MM/dd/yyyy }}</td>
                <td>{{ rci.enteredDate | date:'MM/dd/yyyy }}</td>
                <td>{{ rci.status }}</td>
                <td>{{ rci.equipDisc }}</td>
                <td>{{ rci.outWith }}</td>
                <td>{{ rci.reqAction }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Please help me. What am I missing?