cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <body class="container"  ng-app='Contacts'>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>  


  <div ng-controller="ContactsController">
    <div class="row">
      <aside class="col-lg-3">
        <div class="form-group">
          <input type="text" ng-model="searchText" class="form-control" />
        <ul class="list-group">
          <li ng-repeat="contact in contacts | lastName:searchText" class="list-group-item repeated-item">

            <a ng-href="" ng-click="select($index)">
              <span ng-bind="contact.firstName"></span>&nbsp;<span ng-bind="contact.lastName"></span>
            <button type="button" class="btn btn-danger " ng-click="delete(contact)"> <span class="glyphicon glyphicon-minus"></span></button>

      <article class="col-lg-offset-1 col-lg-8">

        <form novalidate role="form" name="form" class="form-horizontal" ng-submit="add()">
          <div class="form-group">
            <label for="firstName" class="col-sm-2 control-label">Title</label>
            <div class="col-sm-10">
              <select class="form-control" id="title" ng-model="currentContact.title" ng-options="title for title in titles" required>
                <option value="">-- choose title --</option>

          <div class="form-group">
            <label for="firstName" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" ng-model="currentContact.firstName" id="firstName" placeholder="First Name" required>
          <div class="form-group">
            <label for="lastName" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" ng-model="currentContact.lastName" id="lastName" placeholder="Last Name" required>
          <div class="form-group">
            <label for="email" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
              <input type="email" name="eMail" class="form-control" id="email" ng-model="currentContact.eMail" placeholder="Email" required>
          <div class="form-group">
            <label for="city" class="col-sm-2 control-label">City</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="city"  ng-model="currentContact.City" placeholder="City">
            <label for="state" class="col-sm-1 control-label">State</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="state"  ng-model="currentContact.State" placeholder="State">
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-2">
              <!-- note: there is now action on the button, it is on the form so it handles enter/return too -->
              <button type="submit" class="btn btn-primary" ng-disabled="form.$invalid || inEditMode">Add Contact</button>
            <div class="col-sm-2">
              <!-- note: there is now action on the button, it is on the form so it handles enter/return too -->
              <button type="submit" class="btn btn-primary" ng-disabled="form.$invalid || !inEditMode" ng-click="edit()">Edit Contact</button>
            <div class="col-sm-4">
              <button type="button" class="btn btn-warning" ng-click="clear()">Clear</button>

  "use strict";

  var contactsApp = angular.module("Contacts", ["firebase"]);

  contactsApp.constant("FIREBASE_URL", "https://glaring-fire-7316.firebaseio.com/contacts" );
  contactsApp.factory("dataFactory", [function(){
    return {
      getDate: function(){ return new Date();}

  contactsApp.filter('lastName', [function () {
    return function (arrTemp, searchText) {
      var filteredArray = [],
          search = searchText || "",
          reg = new RegExp(search, "i");

      angular.forEach(arrTemp, function (value, key) {
        if(reg.test(value.lastName)) filteredArray.push(value);
      return filteredArray;
  contactsApp.controller("ContactsController", ["$scope", "$firebase", "FIREBASE_URL", "dataFactory", function ($scope, $firebase, FIREBASE_URL, dataFactory) {
    // https://www.firebase.com/docs/web/api/firebase/constructor.html
    var fireRef = new Firebase(FIREBASE_URL);
    var date = dataFactory.getDate();
    // https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebase-asarray
    $scope.contacts = $firebase(fireRef).$asArray();
    $scope.inEditMode = false;
    $scope.currentContact = {};
    $scope.editingContactIndex = 0;
    $scope.titles = [

    $scope.add = function () {
      // https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray-add-newdata
      $scope.currentContact = {};

    $scope.edit = function () {
      // once the user has accept the edit,
      // update the contact in the array
      $scope.contacts[$scope.editingContactIndex] = $scope.currentContact;
      // now tell angularfire which contact to update
      // https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray-save-recordorindex
      $scope.currentContact = {};
      $scope.inEditMode = false;

    $scope.select = function (index) {
      // In order to not change the list of contacts until user accepts
      // edit we make a copy of the contact and save its index
      $scope.editingContactIndex = index;
      $scope.currentContact = angular.copy($scope.contacts[index]);
      $scope.currentContact.title = $scope.currentContact.title;
      $scope.inEditMode = true;

    $scope.clear = function () {
      $scope.currentContact = {};
      $scope.inEditMode = false;

    $scope.delete = function (contact) {
      // https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray-remove-recordorindex

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................