There is a an anchor tag and a select dropdown on a HTML page, dropdown bound to a scope variable of an angularjs controller.

Functionality: Whenever the dropdown's selected value changes, it is supposed to be reflected in anchor tag text.

Problem: When the controller is first initialized, the value in the dropdown gets set but the label's text doesn't get populated.

Following is the code:

Angular code: In AController.js

init = function() {
  $scope.month = {'val': ''}; 
  // some intermediate code which populates month

  $("#element-id").val($scope.month.val);

  var i = $("#element-id").closest(".element-panel");
  var t = i.find(".element-label");
  t.text(element.children(":selected").text());
}

init();

HTML page:

<div class="element-panel">
  <a class="select-label element-label" id="">Month</a>
  <select id="element-id" ng-model="month.val">
    <option value="" style="display:none;"></option> 
    <option value="1">January</option>
    <option value="2">February</option>
        <!-- more options ... -->
    <option value="12">December</option>
  </select>
</div>

There is a an anchor tag and a select dropdown on a HTML page, dropdown bound to a scope variable of an angularjs controller.

Functionality: Whenever the dropdown's selected value changes, it is supposed to be reflected in anchor tag text.

Problem: When the controller is first initialized, the value in the dropdown gets set but the label's text doesn't get populated.

Following is the code:

Angular code: In AController.js

init = function() {
  $scope.month = {'val': ''}; 
  // some intermediate code which populates month

  $("#element-id").val($scope.month.val);

  var i = $("#element-id").closest(".element-panel");
  var t = i.find(".element-label");
  t.text(element.children(":selected").text());
}

init();

HTML page:

<div class="element-panel">
  <a class="select-label element-label" id="">Month</a>
  <select id="element-id" ng-model="month.val">
    <option value="" style="display:none;"></option> 
    <option value="1">January</option>
    <option value="2">February</option>
        <!-- more options ... -->
    <option value="12">December</option>
  </select>
</div>

• javascript
• jquery
• html
• angularjs

• use $("#element-id").parents(".element-panel:first") – Parth Trivedi Commented Jun 6, 2016 at 13:06

3 Answers 3

Here is a working fiddle.

HTML:

<a class="select-label element-label" ng-model="label">{{selected.label}}</a>
<select id="element-id" ng-model="selected" ng-options="opt.label for opt in months">

Controller:

$scope.months = [
    {id: '1', label: "January"},
    {id: '2', label: "February"},
    {id: '3', label: "December"}
];
$scope.selected = {label: 'Month'};

Avoid using jQuery in your controllers. DOM manipulations should be handled elsewhere (directive etc.).

$("#element-id").val should be unneccessary as you are already binding it with ng-model="month.val" in your HTML.

Why not just change you label to

<a class="select-label element-label">{{month.val}}</a>

which should do the binding for you? It's considered best practice to avoid manipulating the DOM from controllers like you are trying to do. You can use a directive instead though.

HTML code,

    <a>{{monthName}}</a>
    <select ng-model="month.val" ng-options="month.Id as month.Name for month in months track by month.Id"
        ng-change="GetValue()">
    </select>

Angula JS code,

            $scope.months = [{
                Id: 1,
                Name: 'jan'
            }, {
                Id: 2,
                Name: 'feb'
            }, {
                Id: 3,
                Name: 'mar'
            }];

            $scope.GetValue = function (fruit) {
                $scope.monthId = $scope.month.val;
                $scope.monthName = $.grep($scope.months, function (month) {
                    return month.Id == $scope.monthId;
                })[0].Name;

            }

month.val contains the selected month id.

On option selection getValue function is called.

This function find out the month name based on month id from $scope.months. Try this.