index.html

<!DOCTYPE html>
<html>
<head>
  <title>Elasticsearch + Angular Example</title>
  <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<!-- boot angular with the ExampleApp module -->
<body ng-app="ExampleApp">
  <!-- attach the ExampleController to our main content -->
  <div ng-controller="ExampleController" class="container">
    <h1>Angular + Elasticsearch</h1>

    <!-- if there is an error, display its message -->
    <div ng-if="error" class="alert alert-danger" role="alert">{{error.message}}</div>

    <!-- if clusterState is available, display it as formatted json -->
    <div ng-if="clusterState" class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Cluster State</h3>
      </div>
      <div class="panel-body">
        <pre>{{clusterState | json}}</pre>
      </div>
    </div>
  </div>

  <!-- include bower components in proper order -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/elasticsearch/elasticsearch.angular.js"></script>

  <!-- app code starts is here -->
  <script>
    // App module
    //
    // The app module will contain all of the components the app needs (directives,
    // controllers, services, etc.). Since it will be using the components within
    // the elasticsearch module, define it a dependency.
    var ExampleApp = angular.module('ExampleApp', ['elasticsearch']);

    // Service
    //
    // esFactory() creates a configured client instance. Turn that instance
    // into a service so that it can be required by other parts of the application
    ExampleApp.service('client', function (esFactory) {
      return esFactory({
        host: 'localhost:9200',
        apiVersion: '1.2',
        log: 'trace'
      });
    });

    // Controller
    //
    // It requires the "client" service, and fetches information about the server,
    // it adds either an error or info about the server to $scope.
    //
    // It also requires the esFactory to that it can check for a specific type of
    // error which might come back from the client
    ExampleApp.controller('ExampleController', function ($scope, client, esFactory) {

      client.cluster.state({
        metric: [
          'cluster_name',
          'nodes',
          'master_node',
          'version'
        ]
      })
      .then(function (resp) {
        $scope.clusterState = resp;
        $scope.error = null;
      })
      .catch(function (err) {
        $scope.clusterState = null;
        $scope.error = err;

        // if the err is a NoConnections error, then the client was not able to
        // connect to elasticsearch. In that case, create a more detailed error
        // message
        if (err instanceof esFactory.errors.NoConnections) {
          $scope.error = new Error('Unable to connect to elasticsearch. ' +
            'Make sure that it is running and listening at http://localhost:9200');
        }
      });

    });
  </script>
</body>
</html>