<!DOCTYPE html>
<html ng-app="apiTest">

  <head>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.3.0-rc.2" data-semver="1.3.0-rc.2" src="  https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
    <link data-require="semantic-ui@0.16.1" data-semver="0.16.1" rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/0.16.1/build/packaged/css/semantic.css" />
    <script data-require="semantic-ui@0.16.1" data-semver="0.16.1" src="https://rawgit.com/Semantic-Org/Semantic-UI/0.16.1/build/packaged/javascript/semantic.js"></script>
    <script src="script.js" type="text/javascript"></script>
  </head>

  <body ng-controller="CharsCtrl">
    <div class="ui button" ng-click="loadMarvel()">
  			Load Marvel
		</div>
    <div class="ui button" ng-click="loadDC()">
  			Load DC
		</div>
    <charselect ng-show="chars.length" style="display:block; margin-top: 30px;"></charselect>
  </body>

</html>

angular.module('apiTest', [])
	.factory('CharsService', function($http, $rootScope) {
		var chars = [];

		function load(url) {
			$http({
    			url: url,
    			method: "GET"
			}).then(function(ret){
				chars = ret.data;
				$rootScope.$broadcast('CharactersLoaded');
			});
		}

		return {
			getChars: function() { return chars; },
			load: load,
		};
	})

	.controller('CharsCtrl', function($scope, CharsService) {
		$scope.loadDC = function() { CharsService.load('dc'); };
		$scope.loadMarvel = function() { CharsService.load('marvel'); };
	})

	.directive('charselect', function(CharsService, $timeout) {
		return {
			restrict: 'E',
			templateUrl: 'char.html',
			link: function(scope, element) {
				scope.$on('CharactersLoaded', function() {
					var dd = element.children('.dropdown');
					scope.chars = CharsService.getChars();
					scope.selected = null;
					$timeout(function() {
						dd.dropdown('restore defaults')
						.dropdown('destroy')
						.dropdown('setting', {
							onChange: function(val) {
								$timeout(function() {
									var selectedIndex = dd.dropdown('get item').attr('index');
									scope.selected = scope.chars[selectedIndex];
								});
							}
						});
					});
				});
			}
		};
	});

<div class="ui selection dropdown">
  <input type="hidden" name="char">
  <div class="default text">Select Character</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="{{char.secretID}}" index="{{$index}}" ng-repeat="char in chars">{{char.name}}</div>
  </div>
</div>

<div class="ui label">{{selected.secretID || "Secret ID"}}</div>

[
  {
    "name": "Spiderman",
    "secretID": "Peter Parker"
  },
  {
    "name": "Marvel Girl",
    "secretID": "Jean Grey"
  },
  {
    "name": "Hulk",
    "secretID": "Bruce Banner"
  }
]
[
  {
    "name": "Batman",
    "secretID": "Bruce Wayne"
  },
  {
    "name": "Superman",
    "secretID": "Clark Kent"
  },
  {
    "name": "Flash",
    "secretID": "Wally West"
  }
]