Anuglar-chosen-localytics not working

Question

I'm trying to create a selecbox using Angular and Chosen. And i Can't seem to get it to work. I feel like im still uploading the wrong scripts, but don't know how to upload the correct ones. I've installed chosen using bower. First i tried:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-chosen-localytics/chosen.js"></script>

angular.module('myApp', ['localytics.directives'])

But then i got an error saying elemnt.chosen is undefined. I read that this happens when you load jquery AFTER loading angular. So I tried:

<script src="bower_components/angular-chosen-localytics/chosen.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>

But this doesn't work because angular is not defined. I found out that i have two seperate bower components, the actual Chosen component and the angular-chosen directives component. So i added the chosen scripts as well:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-chosen-localytics/chosen.js"></script>
<script src="bower_components/chosen/chosen.jquery.js"></script>
<script src="bower_components/chosen/chosen.proto.js"></script>
<script src="bower_components/angular-chosen-localytics/chosen.js"></script>

The errors disappeared, but the elements do not work. I get a simple bar with no options and badly formatted text. Does anyone know what i'm doing wrong?

the element that does not work:

<select chosen
  data-placeholder="Pick one of these"
  disable-search="true"
  allow-single-deselect="true">
  <option value=""></option>
  <option>This is fun</option>
  <option>I like Chosen so much</option>
  <option>I also like bunny rabbits</option>
</select>

Answer 1

EDIT

For me this order worked:

CSS:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="image_src"  href="bower_components/chosen/chosen-sprite.png">
<link rel="stylesheet" href="bower_components/chosen/chosen.css"/>
<link rel="stylesheet" href="styles/chosen-bootstrap.css"/>

Where chosen-bootstrap.css is found here: https://gist.github.com/koenpunt/6424137

Scripts:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/chosen/chosen.proto.js"></script>
<script src="bower_components/chosen/chosen.jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-chosen-localytics/chosen.js"></script>

Custom directive for responsiveness:

  return {
      restrict: 'A',
      replace: false,
      transclude: false,
      link: function(scope, element) {
          element.chosen({ width: '100%' });
      }
  };

The module:

var module = this.module('MyModule', ['ngRoute', 'localytics.directives']);

And the element:

 <select class="form-control" chosen multiple responsive-chosen data-placeholder="Select items" ng-model="selectedItems" ng-options="item.Name for item in allItems">
      <option value=""></option>
 </select>