Simple demo for angular-keypad v1.x with angular-ripple. https://github.com/benjamincharity/angular-keypad

angular.module('plunker', ['bc.AngularKeypad', 'angularRipple'])
    .controller('AppController', ApplicationController);

<!DOCTYPE html>
<html data-ng-app="plunker">

<head>
    <meta charset="utf-8" />

    <title>Angular-Keypad v1.x Plunker</title>

    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/benjamincharity/angular-keypad/v1.0.2/dist/angular-keypad.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="https://cdn.rawgit.com/benjamincharity/angular-keypad/v1.0.2/dist/angular-keypad.min.js"></script>
    <script src="https://cdn.rawgit.com/KL-Moment/angular-ripple/master/angular-ripple.js"></script>
    <script src="application.controller.js"></script>
    <script src="app.js"></script>
</head>

<body data-ng-controller="AppController as vm">

    <section class="demo">

        <h1 class="demo__title">
            {{ vm.projectName }} demo
            <br>
            <small>(with angular-ripple)</small>
        </h1>

        <div class="demo__card">
            <div class="demo__iphone">

                <div class="demo__iphone-numbers">
                    Numbers:
                    
                    <input type="text" data-ng-model="vm.numbers">
                </div>
                
                <div class="demo__iphone-keypad">
                    <bc-keypad bc-number-model="vm.numbers"></bc-keypad>
                </div>
            </div>

        </div>

    </section>



    <!-- Github corner flag -->
    <a href="https://github.com/benjamincharity/angular-keypad" class="github-corner">
        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);">
            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
            <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;"
            class="octo-arm"></path>
            <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
            fill="currentColor" class="octo-body"></path>
        </svg>
    </a>

</body>

</html>

//
// CONFIG
//
$blue: #3498db;
$light_blue: lighten($blue, 35);
$black: #555;
$white: #fcfcfc;
$monospaced_sans  : #{'Lucida Console', Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace};


//
// BASE
//
html {
    font-family: $monospaced_sans;
    height: 100%;
    min-width: 100%;
}

body {
    min-height: 100%;
    padding: 1rem;
}

$iphone_left_padding: 21px;
$iphone_right_padding: 20px;

//
// DEMO
//
.demo {
    background-color: $light_blue;
    color: $black;
    height: 100%;
    min-height: 10rem;
    padding: 2rem 3rem;
    width: 100%;
    
    &__card {
        background-color: $white;
        padding: 1rem;
        text-align: center;
    }

    // <div> container for iphone
    &__iphone {
        background-image: url('http://cdn.benjamincharity.com/plnkr/angular-keypad/iphone.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 590px;
        margin: 0 auto;
        position: relative;
        width: 290px;

        // <div> to show current number string
        &-numbers {
            background-color: #fcfcfc;
            padding: .6rem .6rem .7rem;
            position: absolute;
            left: $iphone_left_padding;
            right: $iphone_right_padding;
            top: 4.5rem;
            
            input {
                margin-top: .4rem;
            }
        }
        
        // <div> container for keypad directive
        &-keypad {
            background-color: #fff;
            position: absolute;
            bottom: 73px;
            left: $iphone_left_padding;
            right: $iphone_right_padding;
        }
    }
}

input {
    padding: .4rem;
    width: 12rem;
}

small {
    font-size: 50%;
}





//
// Github corner flag
//
.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
    0%, 100% {
        transform: rotate(0)
    }
    20%,
    60% {
        transform: rotate(-25deg)
    }
    40%,
    80% {
        transform: rotate(10deg)
    }
}

@media (max-width:500px) {
    .github-corner:hover .octo-arm {
        animation: none
    }
    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
    }
}

class ApplicationController {

    constructor(
    ) {
        'ngInject';


        this._activate();

    }




    _activate() {
        this.projectName = 'angular-keypad v1.x';
        this.numbers = '';
    }

}

# Demo for angular-keypad v1.x

[angular-keypad on Github](https://github.com/benjamincharity/angular-keypad)