AngularJS: dropdown with ng-repeat

Question

I am new to AngularJS . I am creating three tickets using ng-repeat which have dropdown list to choose number of tickets. The number should be displayed into the span, which is not happening. Please help.

HTML :

<tbody>
  <tr ng-repeat-start="ticket in tickets">
    <td>{{ticket.name}}</td>
    <td style={{ticket.status_style}}>{{ticket.status}}</td>
    <td>{{ticket.enddate}}</td>
    <td>{{ticket.price}}</td>
    <td>
      <div ng-click="click($index)" class="select">
        <div><span>{{ticket.selected_item}}</span><i class="icon open"></i>
        </div>
        <ul id="{{ticket.ul_id}}" style="{{popup_style}}">
          <li ng-click="onItemClick($index)" id="{{ticket.li_id}}" ng-repeat="selection in ticket.selections">{{selection.value}}</li>
        </ul>
      </div>
    </td>
  </tr>
  <tr ng-repeat-end class="spacer">
    <td colspan="6">&nbsp;</td>
  </tr>
</tbody> 

script:

<script>
function ticketCtrl($scope) {
  $scope.tickets = [{
    name: "Front Row",
    status: "Sold Out",
    ul_id: "",
    li_id: "",
    selected_item: "0",
    status_style: "color: #FF0000;",
    enddate: "Feb 24, 2014",
    price: "Rs 10",
    selections: [{
      value: 1
    }, {
      value: 2
    }, {
      value: 3
    }, {
      value: 4
    }, {
      value: 5
    }, {
      value: 6
    }, {
      value: 7
    }, {
      value: 8
    }, {
      value: 9
    }, {
      value: 10
    }]
  }, {
    name: "Back Row",
    status: "Available",
    ul_id: "ticket_ul_1",
    li_id: "ticket_li_1",
    selected_item: "0",
    status_style: "",
    enddate: "Mar 28, 2014",
    price: "Rs 1",
    selections: [{
      value: 1
    }, {
      value: 2
    }, {
      value: 3
    }, {
      value: 4
    }, {
      value: 5
    }, {
      value: 6
    }, {
      value: 7
    }, {
      value: 8
    }, {
      value: 9
    }, {
      value: 10
    }]
  }, {
    name: "On the Floor",
    status: "Available",
    ul_id: "ticket_ul_2",
    li_id: "ticket_li_2",
    selected_item: "0",
    status_style: "",
    enddate: "Mar 28, 2014",
    price: "FREE",
    selections: [{
      value: 1
    }, {
      value: 2
    }, {
      value: 3
    }, {
      value: 4
    }, {
      value: 5
    }, {
      value: 6
    }, {
      value: 7
    }, {
      value: 8
    }, {
      value: 9
    }, {
      value: 10
    }]
  }];
  $scope.popup_style = "display: none;";
  $scope.click = function (idx) {
    if (document.getElementById("ticket_ul_" + idx).style.display == "block") {
      document.getElementById("ticket_ul_" + idx).style.display = "none";
    } else if (document.getElementById("ticket_ul_" + idx).style.display == "none") {
      document.getElementById("ticket_ul_" + idx).style.display = "block";
    }
  };
  $scope.onItemClick = function (idx) {
    $scope.tickets.selected_item = idx;
  };
}
</script>

Answer 1

The span is bound to data in tickets[ticket].selected_item but you are setting tickets.selected_item .

You could do something like this (passing the ticket through as well):

onItemClick(ticket, $index)
...
$scope.onItemClick = function (ticket, idx) {
    ticket.selected_item = idx + 1;
};

Answer 2

if u want dropdown u can use: select tag

refer : http://docs.angularjs.org/api/ng/directive/select for dropdown

 <select> 
        <option ng-repeat="ticketno in ticketlist">{{ ticketno }}</option> 
</select>