modules.define('bemdom', ['i-bem__dom'], function(provide, BEMDOM) {
    provide(BEMDOM);
});

modules.define('angular-bem',
    ['BEMHTML', 'bemdom', 'jquery', 'i-bem__dom_init'],
    function(provide, BEMHTML, BEMDOM, $) {

        angular.module('angular-bem', [])
            .value('bemhtml', BEMHTML)
            .value('bemdom', BEMDOM)
            .factory('ngbem', ngBemFactory)
            .directive('ngBem', ngBemDirective)
            .directive('iBem', iBemDirective);

        function ngBemFactory($compile, $timeout, bemdom) {
            var service = { render : render };

            return service;

            function render(bemjson, element, scope) {
                element.replaceWith(
                    $compile(BEMHTML.apply(bemjson))(scope)
                );
            }
        }

        function ngBemDirective(ngbem) {
            return {
                restrict : 'E',
                link : function(scope, element, attrs) {
                    var bemjson = scope.$eval(attrs.bemJson || element.text());

                    ngbem.render(bemjson, element, scope);
                }
            };
        }
        
        function iBemDirective(bemdom){
            return {
                restrict: 'C',
                require : '?ngModel',
                link : function(scope, element, attrs, ngModel) {
                    if (!ngModel) return;
                    
                    var bem = scope.$eval(attrs.bem);
                    angular.forEach(bem, function(v,k){
                        bem[k] = $(element).bem(k);

                        bem[k].on('change', function(e, data) {
                            if(data && data.source === 'ng-model') {
                                scope.$evalAsync(setModelValue.bind(bem[k]));
                            } else {
                                scope.$evalAsync(setViewValue.bind(bem[k]));
                            }
                        });

                        setModelValue.bind(bem[k])();
                    });

                    ngModel.$render = function() {
                        var value = angular.isUndefined(ngModel.$viewValue) ? '' : ngModel.$viewValue;
                        angular.forEach(bem, function(v,k){
                            bem[k].setVal && bem[k].setVal(value, { source : 'ng-model' });
                        });
                    };

                    function setViewValue() {
                        ngModel.$setViewValue(this.getVal());
                    }

                    function setModelValue() {
                        // prevents calling of ng-change listeners
                        ngModel.$modelValue = this.getVal();
                    }
                }
            };
        }

        provide(angular.module('angular-bem'));
    }
);


modules.require(['angular-bem', 'jquery'], function(ng, j){
    window.$ = j;
    angular.module('app', ['angular-bem'])
        .controller('appController', function AppController(){
            var vm = this;

            vm.hello = 'Hello, World';

            vm.select = [2];

            vm.log = function(l){
                console.log(l);
            };
        });

    angular.bootstrap(document, ['app']);
});
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bem-components@2.2.0" data-semver="2.2.0" rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css" />
    <script data-require="bem-components@2.2.0" data-semver="2.2.0" src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="appController as vm">
    <ng-bem ng-cloak>
      [
          {
              block : 'input',
              mods : {
                  theme : 'islands',
                  size : 'xl',
                  angular : true
              },
              attrs : {
                  'ng-model' : 'vm.hello',
                  'ng-change' : 'vm.log("changed")'
              }
          },
          {
              block : 'button',
              mods : {
                  theme : 'islands',
                  size : 'xl'
              },
              text: '{{vm.hello}}',
              attrs : {
                  'ng-click' : 'vm.hello="Bye, Bye"'
              }
          },
          {
              block : 'select',
              mods : { mode : 'check', theme : 'islands', size : 'xl' },
              name : 'select1',
              text : 'Программа конференции',
              attrs : {
                  'ng-model' : 'vm.select',
                  'ng-change' : 'vm.log("changed")'
              },
              options : [
                  { val : 1, text : 'Доклад' },
                  { val : 2, text : 'Мастер-класс' },
                  { val : 3, text : 'Круглый стол' }
              ]
          }
      ]
    </ng-bem>
    <p ng-cloak>{{vm.hello}}</p><p ng-cloak>{{vm.select}}</p>
  </body>

</html>
/* Put your css in here */