Click to Edit with AngularJS

Example 1

HTML

<div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <div>
      <table class="table">
        <thead>
          <tr>
            <th>Country</th>
            <th>Phone Number</th>
            <th>Display in country</th>
          </tr>
        </thead>
        <tbody>

          <tr ng-repeat="num in nums">
            <td>{{num.country}}</td>
            <td>{{num.phone}}</td>
            <td>
              <select name="display_country[]" ng-model="num.selectedCountry">
                <option value="US">United State of America</option>
                <option value="AU">Australia</option>
              </select>
            </td>
          </tr>

          <tr>
            <td colspan="3">
              <button ng-click="send(nums)">click to send all user data </button>
            </td>
          </tr>

        </tbody>
      </table>
    </div>

  </div>
</div>

JavaScript

function ClickToEditCtrl($scope) {

    $scope.nums = [
        {
            country: 'USA',
            phone: '12345',
            selectedCountry: 'US'
        },
        {
            country: 'India',
            phone: '123456',
            selectedCountry: 'AU'
        },
        {
            country: 'Shrilanka',
            phone: '1234567',
            selectedCountry: 'US'
        }
    ];


    $scope.send = function (nums) {
        $scope.postedData = nums;
        
        console.log(nums);
    }
}