Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Basic angularjs example">
  <meta charset="utf-8">
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
  
  <title>JS Bin</title>
</head>
<body ng-app="AppModule">
​
    <!-- Session list -->
  <div class="row" ng-controller="appCtrl">
      <div class="col-lg-12">
          <div class="ibox">
              <div class="ibox-content">
                  <div class="table-responsive">
                      <table class="table table-striped">
                          <thead>
                            <tr>
                              <th>
                                Domain
                              </th>
                            </tr>
                          </thead>
                          <tbody>
                          <tr ng-repeat="session in sessions.list">
                              <td>{{session.domain}}</td>
                          </tr>
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- End of Session list -->
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
</body>
</html>
 
(function(){
  
  var appCtrl = function($scope, $timeout, SessionSvc){
    
    $scope.sessions = {};
    $scope.sessions.list = SessionSvc._cache;
​
    // Simulate putting data asynchronously
    $timeout(function(){
      console.log('something more triggered');
      SessionSvc._cache.push({domain: "something more"});
    }, 2000);
    
    
    // Watch when service has been updated
    $scope.$watch(function(){
      console.log('Watching...');
      return SessionSvc._cache;
    }, function(){
      console.log('Modified');
    }, true);
  };
  
  var SessionSvc = function(){
    this._cache = [{domain: 'something'}];
  };
  
  angular.module('AppModule', [])
          .service('SessionSvc', SessionSvc)
          .controller('appCtrl', appCtrl);
  
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers