Data binding in AngularJS

Question

I am new to AngularJS and have a pretty basic problem I guess.

I have a drop-down list and based on the selection I want a table underneath to update with the belonging information.

<div ng-controller="RightCtrl as right">
  <select ng-model="right.selectedModule">
    <option ng-repeat="module in right.modules" value="{{module.id}}">{{module.name}}
    </option>
  </select>
  <table>
  <thead>
    <th>Right name</th>
    <th>Description</th>
  </thead>
  <tbody ng-repeat="module in right.modules | filter: right.isCurrent">
  <tr ng-repeat="selRight in module.rights">
    <td right-id="{{selRight.id}}">{{selRight.name}}</td>
    <td>
      {{selRight.description}}
    </td>
  </tr>
  </tbody>
  </table>
</div>

I have a jsfiddle (http://jsfiddle.net/EN3S9/) and appreciate every help. Probably I am not completely understanding the concept yet.

Answer 1

I think what you are looking for is to filter based on the selected object like:

<tbody ng-repeat="module in right.modules | filter:right.selectedModule">

Here is the full demo:

Online Demo