Select2 + Angular

Custom data source via AngularJS

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css">
<div ng-app ng-controller="SelectController">
  <select id="pm-select-customized-data" style="width: 300px;">
  </select>
</div>

JavaScript

function SelectController($http) {
  $('#pm-select-customized-data').select2({
    placeholder: 'Select an option...',
    ajax: {
      transport: function(params, success, failure) {
        var url = 'https://jsonplaceholder.typicode.com/posts';
        $http.get(url).then(function(res) {
          success({
            results: res.data.map(function(elem) {
              return {
                id: elem.id,
                text: elem.title
              }
            })
          });
        }).catch(function(err) {
        // TODO: Not failing nicely when HTTP returns an error
          failure({
            results: [],
            hasError: true,
            error: err.data
          });
        });
      }
    }
  });
}