Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
doctype html
html(ng-app="app")
  head
    script(src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js")
    script(src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js")
    link(rel="stylesheet", href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css")
  body(ng-controller="mainCtrl", ng-init="isShow = true")
    button(ng-click="fetch()") fetch photos
    hr
    div(ng-show="isShow")
      carousel(interval="3000")
        slide(ng-repeat="photo in photos", style="background: red")
          {{photo.text}}
    div(ng-show="!isShow") loading..
 
app = angular.module "app", ["ui.bootstrap"]
app.controller "mainCtrl", ($scope, $timeout, $element, $animate) ->
  $animate.enabled false, $element
  photos = [
    {text: "photos #1"}
    {text: "photos #2"}
  ]
  $scope.photos = photos
  $scope.fetch = () ->
    # when fetch, hide carousel, show "loading.."
    $scope.isShow = false
    # clean slides
    $scope.photos = []
    # waiting AJAX
    $timeout(
      ->
        $scope.photos = [
          {text: "photos #1"}
          {text: "photos #2"}
        ]
        # show carousel myself when I need
        $timeout(
          -> $scope.isShow = true
          1000
        )
      2000
    )
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers