pipiripi

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>

    <style>
        html{
            font-size: 1em;
            font-family: Verdana;
        }
        .cmp{
            background-color: red;
        }
    </style>
</head>
<body ng-controller="micontrolador as ctrl">

    <key-value-combo title="Size" selecteditem="ctrl.selectedsize" items="ctrl.sizeelements" ></key-value-combo>
    {{ctrl.selectedsize}}

    <key-value-combo title="ProductType" selecteditem="ctrl.selectedproducttype" items="ctrl.producttypeelements" ></key-value-combo>
    {{ctrl.selectedproducttype}}


    <script>

        var app = angular.module("app", []);

        app.controller("micontrolador", function(){

            this.sizeelements = [{id: 1, caption: "50 LITROS"},{id: 2, caption: "100 LITROS"}];
            this.selectedsize = 1;

            this.producttypeelements = [{id: 1, caption: "BEER"},{id: 2, caption: "CIDER"}];
            this.selectedproducttype = 1;


        });


        app.component('keyValueCombo', {
            restrict:'E',
            template:
                '<div> ' +
                '   <h1>{{ctrl.title}}</h1> ' +
                '   <select ' +
                '      ng-model = "ctrl.selecteditem" ' +
                '      ng-options = "item.id as item.caption for item in ctrl.items" ' +
                '      ng-change = "ctrl.update(ctrl.selecteditem)"> '  +
                '   </select> ' +
                '</div>',

            controllerAs:'ctrl',
            bindings: {
                title: '@',
                items: '<',
                selecteditem: "="
            },
            controller: function(){
                var vm = this;
                vm.update = function(e) {
                    console.log("ahora");

                }


            }
        });
    </script>

</body>
</html>