Display Image In Angular Js is Not working?

<button class="btn btn-default" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{Roles}}
<img src="images/user-pic.png" ng-attr-src="{{'images/'+profilepic}}"  alt="user">
                    </button>

$scope.init = function () {
       // check if there is query in url
       // and fire search in case its value is not empty
       $http.get("api/Login/Getusername")
      .success(function (data, status, headers, config) {
          if (data != "") {
              debugger;
              $scope.Employees = data;
              $scope.User = data[0].username;
              $scope.Roles = data[0].RoleName;
              $scope.profilepic = data[0].profilepic;
              $scope.LoginTime = data[0].SessionInTime;
          }
          else if (data === null | data == "") {
              window.location.href = "Login";
          }

      });
   };