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://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
​
  <h2>Click on Run with Js button</h2>
  <div class="row shop">
​
  <div class="thumb" ng-repeat="item in items">
    <div class="thumbnail">
      <img class="img-responsive" src="{{item.url}}" alt="">
      <div class="wrapper">
        <div class="caption post-content">
          <h4>{{item.name}}</h4>
        </div>
      </div>
      <div class="wrapper">
        <div class="post-meta">
          <button ng-click="selectItem(item)">SELECT</button>
        </div>
      </div>
    </div>
  </div>
</div>
​
<hr />
​
 
<div class="row text-center">
  <h1>YOU HAVE SELECTED {{selectedItem.name}}</h1>
</div>
  
  
</body>
</html>
 
body {
  margin: 5em;
}
​
​
​
.shop {
  display: flex;
  justify-content: space-around;
  text-align: center;
  
  .thumb {
    width: 150px;
  }
  
    button {
        font-weight: bold;
    color: white;
    background-color: black;
    border-radius: 15px;
    border: none;
    }
}
 
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
  
  $scope.selectedItem = {name:""};
  $scope.items=[];
  $scope.items.push({name:"Scott",url:
"http://lorempixel.com/200/200/"});
  
    $scope.items.push({name:"Shyju",url:
"http://lorempixel.com/200/200/"});
  
    $scope.items.push({name:"Brad",url:
"http://lorempixel.com/200/200/"});
  
  
  $scope.selectItem=function(item){
    
    $scope.selectedItem=item;
  };
  
  
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers