Using a variable in ng-repeat and passing it to a controller

Question

I have created an AngularJS app that contains two columns: one for a menu and a second for content (each link in the menu links to). The content and menu is in a table in DynamoDB that I am scanning with a Lambda function. The output of this function is being consumed as a JSON response with the following structure:

{
    "body": [{
        "course-content": "RL front matter",
        "course-video": "https://123-course-videos.s3.amazonaws.com/vid_1.mp4",
        "course-id": "rcl",
        "course-title": "sml",
        "course-lesson": "Lesson One"
    }, {
        "course-content": "RL2 front matter",
        "course-video": "https://123-course-videos.s3.amazonaws.com/vid_2.mp4",
        "course-id": "rcl2",
        "course-title": "sml",
        "course-lesson": "Lesson Two"
    }, {
        "course-content": "RL3 front matter",
        "course-video": "https://123-course-videos.s3.amazonaws.com/vid_3.mp4",
        "course-id": "rcl3",
        "course-title": "sml",
        "course-lesson": "Lesson Three"
    }]
}

I (with the help of the great folks here) built the following controller that loops through the response and builds the menu:

controller

app.controller('menu', function($scope, $http) {
    $http.get('api address').
        then(function(response) {
            $scope.navi = response.data.body;
            $scope.selectCourse = function(course, index, path) {
            console.log(path)
            $scope.content = response.data.body[index]
            console.log($scope.content)
          };

                });
});

menu built using ng-repeat

<div ng-repeat="nav in navi">
    <ul><li>{{ nav['course-lesson'] }}
        <button ng-click="selectCourse(nav, $index, '/content/' + 
        $index)">Select</button>
    </li></ul>
</div>

This build the following menu:

Lesson One <button>
Lesson Three <button>
Lesson Two <button>

And I am using a second controller that consumes the content from the same api call:

app.controller('content', function($scope, $http) {
    $http.get('api address').
        then(function(response) {
            $scope.content = response.data.body;

        });

});

content is displayed in a route with a simple content.html template as follows:

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "templates/main.html"
  })
  .when("/content/:id", {
    templateUrl : "templates/content.html",
    controller : "content"
});

Updated: Here is where I still need help:

1. How do I pass/use the $index variable in the menu controller to the content controller so the content updates as needed in the right template when I click on each button?

To help better understand the functionality:

• Lesson One links to content for lesson one - lesson one content is displayed in the content template.
• List item Lesson Two links to content for lesson two - lesson two content is displayed in the content template.
• List item Lesson Three links to content for lesson three - lesson three content is displayed in the content template.

Sorry for the long post, but I wanted to provide enough detail to help clarify any confusion.

Answer 1

To pass data to a controller from an ng-repeat element, use the ng-click directive:

<div class="col-4" ng-controller="menu">
    <div ng-repeat="nav in navi">
    <ul>
       <li>
          {{ nav['course-lesson'] }}
          <button ng-click="selectCourse(nav, $index)">Select</button>
       </li>
    </ul>
</div>

Assign the function to scope:

$scope.selectCourse = function(course, index) {
    console.log(course, index);
};

For more information, see

• AngularJS ng-click Directive API Reference