Angular: How do I get a column in a table with a dropdown in each cell and set different values in each of these dropdowns?

Question

I am really new to Angular and I am trying to create a table for the information on users.

<div ng-controller="ContactController as cc" ng-app="MyApp" id="account-settings-page">
<div class="slds manage-account-table">
<table class="slds-table slds-table--bordered slds-table--striped">
  <thead>
    <tr class="slds-text-heading--label" role="header">
      <th data-label="staffName" class="slds-is-sortable">Selected Portal User</th>
      <th data-label="title">Title</th>
      <th data-label="email">Email</th>
      <th data-label="phone">Portal Admin</th>
    </tr>
  </thead>
  <tbody ng-model="users">
    <tr ng-repeat="user in users" class="slds-hint-parent">
      <td data-label="contactName">
        <select class="slds-select" ng-model="users">
          <option value="{{user.contactName}}" ng-repeat="user in users">{{user.contactName}}</option>
        </select>
      </td>
      <td data-label="contactTitle">{{user.contactTitle}}</td>
      <td data-label="contactEmail">
        <div>{{user.contactEmail}}</div>
      </td>
      <td data-label="isPortalAdmin">
        <div class="impact-thesis-checkbox">
          <div class="slds-form--stacked">
            <div class="radio">
              <label><input type="radio" name="optradio" ng-checked="{{user.isPortalAdmin}}"></label>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
</div>

JavaScript:

angular
.module('MyApp',[])
.controller('ContactController', function($scope) {
var self = this;
self.data = {
    "users": [{
        "userId": "001290000031Xp0",
        "userName": "Joe Salademaier",
        "contactId": "001290000031Xp0",
        "contactName": "Joe Salademaier",
        "contactTitle": "CEO",
        "contactEmail": "joe@organization.org",
        "isPortalAdmin": true,
        "isUser": true
    }, {
        "userId": "001290000031Xp0",
        "userName": "Anastasia Smith",
        "contactId": "001290000031Xp0",
        "contactName": "Anastasia Smith",
        "contactTitle": "CTO",
        "contactEmail": "asmith@organization.org",
        "isPortalAdmin": false,
        "isUser": true
    }, {
        "userId": "001290000031Xp0",
        "userName": "Bill Salademaier",
        "contactId": "001290000031Xp0",
        "contactName": "Bill Salademaier",
        "contactTitle": "CMO",
        "contactEmail": "bill@organization.org",
        "isPortalAdmin": false,
        "isUser": true
    }, {
        "userId": "001290000031Xp0",
        "userName": "Joe Schmope",
        "contactId": "001290000031Xp0",
        "contactName": "Joe Schmope",
        "contactTitle": "VP Finance",
        "contactEmail": "bill@organization.org",
        "isPortalAdmin": false,
        "isUser": true
    }, {
        "userId": "001290000031Xp0",
        "userName": "Jill Meiser",
        "contactId": "001290000031Xp0",
        "contactName": "Joe Salademaier",
        "contactTitle": "VP Marketing",
        "contactEmail": "bill@organization.org",
        "isPortalAdmin": false,
        "isUser": true
    }, {
        "userId": "",
        "userName": "",
        "contactId": "001290000031Xp0",
        "contactName": "Rajesh Gupta",
        "contactTitle": "Developer",
        "contactEmail": "raj@always.org",
        "isPortalAdmin": false,
        "isUser": false
    }, {
        "userId": "",
        "userName": "",
        "contactId": "001290000031Xp0",
        "contactName": "Jill Sedelmaier",
        "contactTitle": "Senior Consultant",
        "contactEmail": "jill@never.org",
        "isPortalAdmin": false,
        "isUser": false
    }]
};
$scope.users = self.data.users;
});

I need to get this data in a table for the columns Contact Name, Contact Title, Contact Email and a field representing a Boolean value. While I have been successful in getting the value for the last three columns, I can't set the value in the first column which is supposed to be a dropdown. I have two questions: 1. How do I set the value in the dropdown for each user? 2. How do I get the row values change as I change the selected user?

Here is the link to my attempt on Codepen : http://codepen.io/Gromit/pen/qbwmvZ

Answer 1

This may help you with the drop down: AngularJS: Get selected Text and Value of HTML Select DropDownList using ng-change remember that one of the great things about angular is it's ability to link the data to your view dynamically , so you could add to the data a "show" flag (true or false) and using ng-if="data.show" or ng-show="data.show" filter the results using a function that change the value of data.show, depending on the value of the drop down... Is just an idea, it depends on how you design it... Sorry if I misled you, but I don't find clear if it's exactly what you want...

From the example:

<tr>
   <td>
    <select ng-model="selectedItemVarUser" ng-options="d.userId as d.userName for d in data track by d.Id"
        ng-change="GetValue()">
    </select>
   </td>
...
</tr>