getsetbro/jsbin.linkedDDs.css

## jsbin.linkedDDs.css

.navbar-nav > li {
  float: left;
  margin-left:10px;
  border:1px solid #ddd;
  padding:0 8px
}
.dropdown:hover .dropdown-menu{
  display:block;
  padding:0;
  border:0 none;
}


## jsbin.linkedDDs.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
<title>linked dropdowns</title>
<meta name="description" content="angularJS linked dropdowns" /><link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
</head>
<body class="container" ng-controller="firstCtrl">
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <div class="dropdown-toggle" data-toggle="dropdown">
        <div>Items 1</div>
        <small>Chosen: {{selected1}}</small>
      </div>
      <div class="dropdown-menu list-group wide">
        <a ng-repeat="item in list1" class="list-group-item" href="" ng-click="clk1($index)">{{item}}
        </a>
      </div>
    </li>
    <li class="dropdown">
      <div class="dropdown-toggle" data-toggle="dropdown">
        <div>Items 2</div>
        <small>Chosen: {{selected2}}</small>
      </div>
      <div class="dropdown-menu list-group wide">
        <a ng-repeat="item in choices2" class="list-group-item" href="" ng-click="clk2($index)">{{item}}
        </a>
      </div>
    </li>
    <li class="dropdown">
      <div class="dropdown-toggle" data-toggle="dropdown">
        <div>Items 3</div>
        <small>Chosen: {{selected3}}</small>
      </div>
      <div class="dropdown-menu list-group wide">
        <a ng-repeat="item in choices3" class="list-group-item" href="" ng-click="clk3($index)">{{item}}
        </a>
      </div>
    </li>
  </ul>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</body>
</html>

## jsbin.linkedDDs.js
var my = angular.module('app', []);

my.factory('DS', function() {
    var obj = {
        list1: [
            'item1.1', 'item1.2', 'item1.3'
        ],
        list2: [
            ['item2.11', 'item2.12', 'item2.13'],
            ['item2.21', 'item2.22', 'item2.23'],
            ['item2.31', 'item2.32', 'item2.33']
        ],
        list3: [
            ['item3.11', 'item3.12', 'item3.13'],
            ['item3.21', 'item3.22', 'item3.23'],
            ['item3.31', 'item3.32', 'item3.33']
        ]
    };
    return obj;
});

my.controller('firstCtrl', function($scope, DS) {
    $scope.list1 = DS.list1;

    $scope.selected1 = 'none';
    $scope.clk1 = function(idx) {
        $scope.selected1 = $scope.list1[idx];
        $scope.selected2 = 'none';
        $scope.selected3 = 'none';
        $scope.choices2 = $scope.list2[idx];
        $scope.selectedrow2 = idx;
        $scope.selectedrow3 = -1;
        $scope.choices3 = ['First choose from items 2'];
    };

    $scope.list2 = DS.list2;
    $scope.choices2 = ['First choose from items 1'];
    $scope.selected2 = 'none';
    $scope.selectedrow2 = -1;
    $scope.clk2 = function(idx) {
        if ($scope.selectedrow2 >= 0) {
            $scope.selected2 = $scope.list2[$scope.selectedrow2][idx];
            $scope.selected3 = 'none';
            $scope.choices3 = $scope.list3[idx];
            $scope.selectedrow3 = idx;
        }
    };

    $scope.list3 = DS.list3;
    $scope.choices3 = ['First choose from items 2'];
    $scope.selected3 = 'none';
    $scope.selectedrow3 = -1;
    $scope.clk3 = function(idx) {
        if ($scope.selectedrow3 >= 0) {
            $scope.selected3 = $scope.list3[$scope.selectedrow3][idx];
        }
    };
});

	.navbar-nav > li {
	float: left;
	margin-left:10px;
	border:1px solid #ddd;
	padding:0 8px
	}
	.dropdown:hover .dropdown-menu{
	display:block;
	padding:0;
	border:0 none;
	}
	<!DOCTYPE html>
	<html ng-app="app">
	<head>
	<meta charset=utf-8 />
	<title>linked dropdowns</title>
	<meta name="description" content="angularJS linked dropdowns" /><link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
	</head>
	<body class="container" ng-controller="firstCtrl">
	<ul class="nav navbar-nav">
	<li class="dropdown">
	<div class="dropdown-toggle" data-toggle="dropdown">
	<div>Items 1</div>
	<small>Chosen: {{selected1}}</small>
	</div>
	<div class="dropdown-menu list-group wide">
	<a ng-repeat="item in list1" class="list-group-item" href="" ng-click="clk1($index)">{{item}}
	</a>
	</div>
	</li>
	<li class="dropdown">
	<div class="dropdown-toggle" data-toggle="dropdown">
	<div>Items 2</div>
	<small>Chosen: {{selected2}}</small>
	</div>
	<div class="dropdown-menu list-group wide">
	<a ng-repeat="item in choices2" class="list-group-item" href="" ng-click="clk2($index)">{{item}}
	</a>
	</div>
	</li>
	<li class="dropdown">
	<div class="dropdown-toggle" data-toggle="dropdown">
	<div>Items 3</div>
	<small>Chosen: {{selected3}}</small>
	</div>
	<div class="dropdown-menu list-group wide">
	<a ng-repeat="item in choices3" class="list-group-item" href="" ng-click="clk3($index)">{{item}}
	</a>
	</div>
	</li>
	</ul>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
	</body>
	</html>
	var my = angular.module('app', []);

	my.factory('DS', function() {
	var obj = {
	list1: [
	'item1.1', 'item1.2', 'item1.3'
	],
	list2: [
	['item2.11', 'item2.12', 'item2.13'],
	['item2.21', 'item2.22', 'item2.23'],
	['item2.31', 'item2.32', 'item2.33']
	],
	list3: [
	['item3.11', 'item3.12', 'item3.13'],
	['item3.21', 'item3.22', 'item3.23'],
	['item3.31', 'item3.32', 'item3.33']
	]
	};
	return obj;
	});

	my.controller('firstCtrl', function($scope, DS) {
	$scope.list1 = DS.list1;

	$scope.selected1 = 'none';
	$scope.clk1 = function(idx) {
	$scope.selected1 = $scope.list1[idx];
	$scope.selected2 = 'none';
	$scope.selected3 = 'none';
	$scope.choices2 = $scope.list2[idx];
	$scope.selectedrow2 = idx;
	$scope.selectedrow3 = -1;
	$scope.choices3 = ['First choose from items 2'];
	};

	$scope.list2 = DS.list2;
	$scope.choices2 = ['First choose from items 1'];
	$scope.selected2 = 'none';
	$scope.selectedrow2 = -1;
	$scope.clk2 = function(idx) {
	if ($scope.selectedrow2 >= 0) {
	$scope.selected2 = $scope.list2[$scope.selectedrow2][idx];
	$scope.selected3 = 'none';
	$scope.choices3 = $scope.list3[idx];
	$scope.selectedrow3 = idx;
	}
	};

	$scope.list3 = DS.list3;
	$scope.choices3 = ['First choose from items 2'];
	$scope.selected3 = 'none';
	$scope.selectedrow3 = -1;
	$scope.clk3 = function(idx) {
	if ($scope.selectedrow3 >= 0) {
	$scope.selected3 = $scope.list3[$scope.selectedrow3][idx];
	}
	};
	});