AngularJS 1.3.x

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});


//Popover Templat
app.directive('mypopover', function ($compile, $templateCache, $q, $http) {
    var getTemplate = function (contentType) {
        var def = $q.defer();
        var template = '';
        switch (contentType) {
            case 'user':
                template = $templateCache.get("schools.html");
                if (typeof template === "undefined") {
                    $http.get("schools.html")
            .success(function (data) {
                $templateCache.put("schools.html", data);
                def.resolve(data);
            });
                } else {
                    def.resolve(template);
                }
                break;
        }
        return def.promise;
    }
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            getTemplate("user").then(function (popOverContent) {
                var options = {
                    content: $compile($(popOverContent))(scope),
                    placement: "bottom",
                    html: true,
                    trigger: "click"
                };
                $(element).popover(options);

            });
            scope.closing = function () {
                $(".popover").popover('hide');
            }
            
        }
    };
});

app.directive('changeColor', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
         $( ".changeColor" ).click(function() {
           alert("color is red");
             $('.btn-primary').css('background-color', 'red');
          });
            
        }
    };
} ])

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
   
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
     <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="col-xs-12" id="placeBtn"><button type="button" class="btn btn-primary" mypopover>Search School Type</button></div>
  </body>

</html>

/* Put your css in here */

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 center">
            Choose your school type:
        </div>
    </div>
    <form name="userSchoolType">
        <div id="others_schools">
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <select id="select" class="form-control" name="other">
                            <option value="Private" class="others">Private</option>
                            <option value="College" class="others">College</option>
                            <option value="Public" class="others">Public</option>
                        </select>
                        <button changeColor class="changeColor btn btn-primary" style="margin-top:15px">click to change btn color</button>
                    </div>
                </div>

            </div>
        </div>
        <div class="row margin-top-10">
            <div class="col-xs-6"><button  ng-click="closing()" type="button" class="btn-empty btn-continue back-search-place"><span class="icon-arrow_right back-arrow-right"></span><span>close</span></button></div>
        </div>
    </form>
</div>