Change dropdown name depending on selection in dropdown

Question

I want to change the dropdown name in the navbar depending on selection in dropdown. I find that ng-click is not supported with html tag. I have tried it with but it doesn't work. Help me to find a solution to this problem. Solution with angularJs is needed, but jQuery is possible at worst.

My code:

HTML

      <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Current: {{currentApplication}}</a>
                  <ul class="dropdown-menu" ng-repeat="application in applications" ng-click="changeApplication(application.name)">
                      <li><a href="#">{{application.name}}</a></li>
                  </ul>
              </li>
          </ul>
      </div>

Angular

myApp.controller("navbarController", function ($scope, $http) {
  $scope.currentApplication = "default";

  var changeApplication = function(name) {
      $scope.currentApplication = name;
  };
  $http({
      method: 'GET',
      url: 'applications'
  }).then(function success(response) {
      $scope.applications = response.data,
  });
});

Answer 1

ng-click="changeApplication does nothing because you defined function as :

var changeApplication = function(name) {
    $scope.currentApplication = name;
};

Bind to $scope as:

$scope.changeApplication = function(name) {
    $scope.currentApplication = name;
};