Angular selector with button

by odiseo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
<div ng-app="app" ng-controller="myController">
  <div>
    Selected tour: {{activeTour.name}}
  </div>
   <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
      <span ng-if="!tourSelected">Select a tour</span>
      <span ng-if="tourSelected" ng-click="toggleTour();">End Tour</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#" ng-repeat="tour in tours" ng-click="makeActiveTour(tour)">
        {{tour.name}}
      </a>
    </div>
  </div> 
</div>

JavaScript

var app = angular.module('app', []);

app.controller('myController', function($scope) {
	    $scope.tours = [
    	{name: "tour 1", id: "aaa"},
      {name: "tour 2", id: "bbb"},
      {name: "tour 3", id: "ccc"},
      {name: "tour 4", id: "ddd"},
    ];
    $scope.activeTour = "";
    
    $scope.tourSelected = false;
    $scope.toggleTour = function(){
    	$scope.tourSelected = !$scope.tourSelected;
    };    
    $scope.makeActiveTour = function(tour) {
    	$scope.activeTour = tour;
      $scope.toggleTour();
    };
    

});