diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..44f11df
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+/dist
+/tmp
+package-lock\.json
+src/etc/develop\.js
diff --git a/.jshintrc b/.jshintrc
new file mode 100644
index 0000000..d8cbb07
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,64 @@
+{
+    /*
+     * ENVIRONMENTS
+     * =================
+     */
+
+    // Define globals exposed by modern browsers.
+    "browser": true,
+
+    // Define globals exposed by jQuery.
+    "jquery": true,
+
+    // Define globals exposed by Node.js.
+    "node": true,
+
+    // Allow ES6.
+    "esversion": 6,
+
+    /*
+     * ENFORCING OPTIONS
+     * =================
+     */
+
+    // Force all variable names to use either camelCase style or UPPER_CASE
+    // with underscores.
+    "camelcase": true,
+
+    // Prohibit use of == and != in favor of === and !==.
+    "eqeqeq": true,
+
+    // Enforce tab width of 2 spaces.
+    "indent": 4,
+
+    // Prohibit use of a variable before it is defined.
+    "latedef": false,
+
+    // Enforce line length to 100 characters
+    "maxlen": 100,
+
+    // Require capitalized names for constructor functions.
+    "newcap": true,
+
+    // Enforce use of single quotation marks for strings.
+    "quotmark": "single",
+
+    // Enforce placing 'use strict' at the top function scope
+    "strict": false,
+
+    // Prohibit use of explicitly undeclared variables.
+    "undef": true,
+
+    // Warn when variables are defined but never used.
+    "unused": true,
+
+    // Para que funcione en angular
+    "predef": ["angular", "alert", "spyOn", "expect", "it", "inject", "beforeEach", "describe"],
+    /*
+     * RELAXING OPTIONS
+     * =================
+     */
+
+    // Suppress warnings about == null comparisons.
+    "eqnull": true
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0484f6b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# foca-modal-banco
+
+Modal de lista de cobradores con filtros
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..2f4cb80
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,82 @@
+const templateCache = require('gulp-angular-templatecache');
+const concat        = require('gulp-concat');
+const htmlmin       = require('gulp-htmlmin');
+const rename        = require('gulp-rename');
+const uglify        = require('gulp-uglify');
+const gulp          = require('gulp');
+const pump          = require('pump');
+const jshint        = require('gulp-jshint');
+const replace       = require('gulp-replace');
+const connect       = require('gulp-connect');
+const clean         = require('gulp-clean');
+
+var paths = {
+    srcJS:    'src/js/*.js',
+    srcViews: 'src/views/*.html',
+    tmp:      'tmp',
+    dist:     'dist/'
+};
+
+gulp.task('templates', function() {
+    return pump(
+        [
+            gulp.src(paths.srcViews),
+            replace('views/', ''),
+            htmlmin(),
+            templateCache('views.js', {
+                module: 'focaModalBanco',
+                root: ''
+            }),
+            gulp.dest(paths.tmp)
+        ]
+    );
+});
+
+gulp.task('uglify', ['templates'], function() {
+    return pump(
+        [
+            gulp.src([
+                paths.srcJS,
+                'tmp/views.js'
+            ]),
+            concat('foca-modal-banco.js'),
+            replace('src/views/', ''),
+            replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
+            gulp.dest(paths.tmp),
+            rename('foca-modal-banco.min.js'),
+            uglify(),
+            gulp.dest(paths.dist)
+        ]
+    );
+});
+
+gulp.task('pre-commit', function() {
+    return pump(
+        [
+            gulp.src(paths.srcJS),
+            jshint('.jshintrc'),
+            jshint.reporter('default'),
+            jshint.reporter('fail')
+        ]
+    );
+
+    gulp.start('uglify');
+});
+ 
+gulp.task('webserver', function() {
+    pump [
+        connect.server({port: 3000})
+    ]
+});
+
+gulp.task('clean-post-install', function() {
+    return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
+                     'index.html'], {read: false})
+    .pipe(clean());
+});
+
+gulp.task('default', ['webserver']);
+
+gulp.task('watch', function() {
+    gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d52759e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+<html ng-app="focaModalBanco">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!--CSS-->
+    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+    <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
+
+    <!--VENDOR JS-->
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="node_modules/angular/angular.min.js"></script>
+    <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
+    <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
+    <script src="node_modules/ladda/dist/spin.min.js"></script>
+    <script src="node_modules/ladda/dist/ladda.min.js"></script>
+    <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
+
+    <!-- BUILD -->
+    <script src="src/js/app.js"></script>
+    <script src="src/js/controller.js"></script>
+    <script src="src/js/service.js"></script>
+
+    <!-- /BUILD -->
+    <script src="src/etc/develop.js"></script>
+</head>
+
+<body ng-controller="controller">
+</body>
+
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5e94d83
--- /dev/null
+++ b/package.json
@@ -0,0 +1,63 @@
+{
+    "name": "foca-modal-banco",
+    "version": "0.0.1",
+    "description": "Modal para seleccionar bancos",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "gulp-pre-commit": "gulp pre-commit",
+        "compile": "gulp uglify",
+        "postinstall": "npm run compile && gulp clean-post-install",
+        "install-dev": "npm install -D angular angular-ladda ladda@1.0.6 bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-clean gulp-replace gulp-uglify jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+http://git.focasoftware.com/npm/foca-directivas.git"
+    },
+    "pre-commit": [
+        "gulp-pre-commit"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "http://git.focasoftware.com/npm/foca-modal-cobrador.git"
+    },
+    "author": "Foca Software",
+    "license": "ISC",
+    "peerDependencies": {
+        "angular": "^1.7.4",
+        "bootstrap": "^4.1.3",
+        "font-awesome": "^4.7.0",
+        "ui-bootstrap4": "^3.0.4",
+        "gulp": "^3.9.1",
+        "gulp-angular-templatecache": "^2.2.1",
+        "gulp-concat": "^2.6.1",
+        "gulp-connect": "^5.6.1",
+        "gulp-htmlmin": "^5.0.1",
+        "gulp-rename": "^1.4.0",
+        "gulp-replace": "^1.0.0",
+        "gulp-uglify": "^3.0.1",
+        "jquery": "^3.3.1",
+        "pump": "^3.0.0",
+        "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git"
+    },
+    "devDependencies": {
+        "angular": "^1.7.5",
+        "angular-ladda": "^0.4.3",
+        "bootstrap": "^4.1.3",
+        "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git",
+        "font-awesome": "^4.7.0",
+        "gulp": "^3.9.1",
+        "gulp-angular-templatecache": "^2.2.5",
+        "gulp-clean": "^0.4.0",
+        "gulp-concat": "^2.6.1",
+        "gulp-connect": "^5.6.1",
+        "gulp-htmlmin": "^5.0.1",
+        "gulp-jshint": "^2.1.0",
+        "gulp-rename": "^1.4.0",
+        "gulp-replace": "^1.0.0",
+        "gulp-uglify": "^3.0.1",
+        "jasmine-core": "^3.3.0",
+        "jquery": "^3.3.1",
+        "jshint": "^2.9.6",
+        "ladda": "^1.0.6",
+        "pre-commit": "^1.2.2",
+        "pump": "^3.0.0",
+        "ui-bootstrap4": "^3.0.5"
+    }
+}
diff --git a/src/etc/develop.js.ejemplo b/src/etc/develop.js.ejemplo
new file mode 100644
index 0000000..595c406
--- /dev/null
+++ b/src/etc/develop.js.ejemplo
@@ -0,0 +1,4 @@
+angular.module('focaModalBanco')
+    .constant("API_ENDPOINT", {
+        'URL': '//127.0.0.1:9000'
+    });
diff --git a/src/js/app.js b/src/js/app.js
new file mode 100644
index 0000000..f7aa3f3
--- /dev/null
+++ b/src/js/app.js
@@ -0,0 +1 @@
+angular.module('focaModalBanco', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
diff --git a/src/js/controller.js b/src/js/controller.js
new file mode 100644
index 0000000..b80f250
--- /dev/null
+++ b/src/js/controller.js
@@ -0,0 +1,160 @@
+angular.module('focaModalBanco')
+    .controller('focaModalBancoController', [
+        '$filter',
+        '$scope',
+        '$uibModalInstance',
+        'focaModalBancoService',
+        'filters',
+        function($filter, $scope, $uibModalInstance, focaModalBancoService, filters) {
+
+            $scope.filters = filters;
+            $scope.bancos = [];
+            $scope.primerBusqueda = false;
+            $scope.searchLoading = false;
+            // pagination
+            $scope.numPerPage = 10;
+            $scope.currentPage = 1;
+            $scope.filteredBancos = [];
+            $scope.currentPageBancos = [];
+            $scope.selectedBanco = -1;
+
+            $scope.busquedaPress = function(key) {
+                if (key === 13) {
+                    $scope.searchLoading = true;
+                    focaModalBancoService.getBancos($scope.filters).then(
+                        function(res) {
+                            $scope.searchLoading = false;
+                            $scope.primerBusqueda = true;
+                            $scope.bancos = res.data;
+                            $scope.search();
+                            primera();
+                        }
+                    );
+                }
+            };
+
+            $scope.search = function() {
+                if($scope.bancos.length > 0) {
+                    $scope.filteredBancos = $filter('filter')(
+                    $scope.bancos, { $: $scope.filters }
+                    );
+                    $scope.lastPage = Math.ceil(
+                        $scope.filteredBancos.length / $scope.numPerPage
+                    );
+                    $scope.resetPage();
+                }
+            };
+
+            $scope.resetPage = function() {
+                $scope.currentPage = 1;
+                $scope.selectPage(1);
+            };
+
+            $scope.selectPage = function(page) {
+                var start = (page - 1) * $scope.numPerPage;
+                var end = start + $scope.numPerPage;
+                $scope.paginas = [];
+                $scope.paginas = calcularPages(page);
+                $scope.currentPageBancos = $scope.filteredBancos.slice(start, end);
+                $scope.currentPage = page;
+            };
+
+            $scope.select = function(vendedor) {
+                $uibModalInstance.close(vendedor);
+            };
+
+            $scope.cancel = function() {
+                $uibModalInstance.dismiss('cancel');
+            };
+
+            $scope.busquedaDown = function(key) {
+                if (key === 40) {
+                    primera(key);
+                }
+            };
+
+            $scope.itemBanco = function(key) {
+                if (key === 38) {
+                    anterior(key);
+                }
+
+                if (key === 40) {
+                    siguiente(key);
+                }
+
+                if (key === 37) {
+                    retrocederPagina();
+                }
+
+                if (key === 39) {
+                    avanzarPagina();
+                }
+            };
+
+            function calcularPages(paginaActual) {
+                var paginas = [];
+                paginas.push(paginaActual);
+
+                if (paginaActual - 1 > 1) {
+
+                    paginas.unshift(paginaActual - 1);
+                    if (paginaActual - 2 > 1) {
+                        paginas.unshift(paginaActual - 2);
+                    }
+                }
+
+                if (paginaActual + 1 < $scope.lastPage) {
+                    paginas.push(paginaActual + 1);
+                    if (paginaActual + 2 < $scope.lastPage) {
+                        paginas.push(paginaActual + 2);
+                    }
+                }
+
+                if (paginaActual !== 1) {
+                    paginas.unshift(1);
+                }
+
+                if (paginaActual !== $scope.lastPage) {
+                    paginas.push($scope.lastPage);
+                }
+
+                return paginas;
+            }
+
+            function primera() {
+                $scope.selectedBanco = 0;
+            }
+
+            function anterior() {
+                if ($scope.selectedBanco === 0 && $scope.currentPage > 1) {
+                    retrocederPagina();
+                } else {
+                    $scope.selectedBanco--;
+                }
+            }
+
+            function siguiente() {
+                if ($scope.selectedBanco < $scope.currentPageBancos.length - 1) {
+                    $scope.selectedBanco++;
+                } else {
+                    avanzarPagina();
+                }
+            }
+
+            function retrocederPagina() {
+                if ($scope.currentPage > 1) {
+                    $scope.selectPage($scope.currentPage - 1);
+                    $scope.selectedBanco = $scope.numPerPage - 1;
+                }
+            }
+
+            function avanzarPagina() {
+                if ($scope.currentPage < $scope.lastPage) {
+                    $scope.selectPage($scope.currentPage + 1);
+                    $scope.selectedBanco = 0;
+                }
+            }
+
+            $scope.busquedaPress(13);
+        }]
+    );
diff --git a/src/js/service.js b/src/js/service.js
new file mode 100644
index 0000000..ee0923f
--- /dev/null
+++ b/src/js/service.js
@@ -0,0 +1,8 @@
+angular.module('focaModalBanco')
+    .factory('focaModalBancoService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
+        return {
+            getBancos: function() {
+                return $http.get(API_ENDPOINT.URL + '/banco');
+            }
+        };
+    }]);
diff --git a/src/views/modal-bancos.html b/src/views/modal-bancos.html
new file mode 100644
index 0000000..a3cbd05
--- /dev/null
+++ b/src/views/modal-bancos.html
@@ -0,0 +1,100 @@
+<div class="modal-header">
+    <h5 class="modal-title my-1">Búsqueda de bancos</h5>
+</div>
+<div class="modal-body" id="modal-body">
+    <div class="input-group">
+        <input
+            ladda="searchLoading"
+            type="text"
+            class="form-control form-control-sm"
+            placeholder="Busqueda"
+            ng-model="filters"
+            ng-change="search()"
+            ng-keydown="busquedaDown($event.keyCode)"
+            ng-keypress="busquedaPress($event.keyCode)"
+            foca-focus="selectedBanco == -1"
+            ng-focus="selectedBanco = -1"
+            teclado-virtual
+        >
+        <div class="input-group-append">
+            <button
+                ladda="searchLoading"
+                class="btn btn-outline-secondary"
+                type="button"
+                ng-click="busquedaPress(13)"
+            >
+                <i class="fa fa-search" aria-hidden="true"></i>
+            </button>
+        </div>
+    </div>
+    <table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
+        <thead>
+            <tr>
+                <th>Código</th>
+                <th>Nombre</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr ng-show="currentPageBancos.length == 0 && primerBusqueda">
+                <td colspan="3">
+                    No se encontraron resultados.
+                </td>
+            </tr>
+            <tr class="selected"
+                ng-repeat="(key, banco) in currentPageBancos"
+                ng-click="select(banco)"
+                >
+                <td ng-bind="banco.ID"></td>
+                <td ng-bind="banco.desbco"></td>
+                <td class="d-md-none text-primary">
+                    <i class="fa fa-arrow-right" aria-hidden="true"></i>
+                </td>
+                <td class="d-none d-md-table-cell">
+                    <button
+                        type="button"
+                        class="btn btn-xs p-1 float-right"
+                        ng-class="{
+                            'btn-secondary': selectedBanco != key,
+                            'btn-primary': selectedBanco == key
+                        }"
+                        foca-focus="selectedBanco == {{key}}"
+                        ng-keydown="itemBanco($event.keyCode)">
+                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <nav ng-show="currentPageBancos.length > 0 && primerBusqueda">
+        <ul class="pagination pagination-sm justify-content mb-0">
+            <li class="page-item" ng-class="{'disabled': currentPage == 1}">
+                <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
+                    <span aria-hidden="true">&laquo;</span>
+                    <span class="sr-only">Anterior</span>
+                </a>
+            </li>
+            <li
+                class="page-item"
+                ng-repeat="pagina in paginas"
+                ng-class="{'active': pagina == currentPage}"
+            >
+                <a
+                    class="page-link"
+                    href="javascript:void();"
+                    ng-click="selectPage(pagina)"
+                    ng-bind="pagina"
+                ></a>
+            </li>
+            <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
+                <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
+                    <span aria-hidden="true">&raquo;</span>
+                    <span class="sr-only">Siguiente</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
+<div class="modal-footer">
+    <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>
+</div>