JSFiddle - React, Tailwind, and code Playground

Select 2.0 full angular for Ubigreen

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl" class="background" style="">
  <div style="width:800px;height:800px;background:rgb(238, 238, 238);overflow: auto">
    <div class="container">

      <div style="width:300px;">


        <div class="dropdownContainer">
          <div ng-click="Show = !Show" class="dropdownSelectedItem" ng-init="SelectedOption = 'Sélectionnez une option'">
            {{SelectedOption}}<i class="fa fa-chevron-down dropdownIcon"></i>
          </div>
          <div class="dropdownList">
            <div ng-repeat="orga in Organisations track by $index" ng-show="Show" class="dropdownOptions" ng-click="changeoption(orga)">
              {{orga}}
            </div>
          </div>
        </div>
<br/><br/><br/><br/><br/>
<div class="dropdownContainer">
          <div ng-click="Show = !Show" class="dropdownSelectedItem" ng-init="SelectedOption = 'Sélectionnez une option'" style="position:fixed">
            {{SelectedOption}}<i class="fa fa-chevron-down dropdownIcon"></i>
          </div>
         
          </div>
        </div>

        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
    </div>
  </div>
</div>

CSS

/* Container class, don't copy */
.container {
  width: 400px;
  margin-left: 30px;
  margin-top: 30px;
}

/* Classes for the dropdown */
.dropdownSelectedItem {
  border: none;
  background: white no-repeat scroll right center;
  display: block;
  border-bottom: 1px solid #00FF66;
  width: 100%;
  padding: 10px 20px 10px 10px;
  -webkit-border-top-left-radius: 2px;
  -webkit-border-top-right-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.dropdownOptions {
  background-color: white;
  width: 100%;
  padding: 10px 20px 10px 10px;
}

.dropdownOptions:hover {
  background-color: #66FF99;
}

.dropdownList {
  position: absolute;
  width: 100%;
  height: 300px;
  overflow: auto;
}

.dropdownIcon {
  position: absolute;
  right: 15px;
}

.dropdownContainer {
  position: relative;
  width: 100%;
}

JavaScript

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

myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.name = "Angular";
  $scope.Show = false;

  $scope.Organisations = [
    "Orga 1",
    "Orga 2",
    "Orga 3",
    "Orga 4",
    "Orga 4",
    "Orga 4",
    "Orga 4",
    "Orga 4",
    "Orga 4",
    "Orga 4",
    "Orga 4",
    "Orga 4",
    "Orga 4",
    "Orga 4"
  ];
  $scope.Types = ["Energétique", "Budgétaire", "Environnemental"];
  $scope.Periodes = ["Jour précédent", "Jour glissant", "Semaine en cours"];

  $scope.changeoption = function(item) {
    $scope.Show = false;
    $scope.SelectedOption = item;
  };
}]);