image uploading directive angular js

I'm new to writing directives in Angular and was following along with the egghead tutorial on file uploaders, and managed to get my file uploader to work with express/multer. I have this really weird behavior though--- once the file is chosen, one of those ugly default image shows up:

When I click "upload" everything is fine (except for Kim Kardashian of course):

Here is my angular code. I think everything is working fine on the server side:

Controller/Directive:

angular.module('MyApp')
  .controller('ProfileCtrl', function ($scope, $http, $rootScope, Profile) {
    // $rootScope.currentUser = user;
    $scope.user = $rootScope.currentUser;
    $scope.name = $scope.user.name;
    $scope.imageData = null;
    $scope.pictures = $scope.user.facebook ? $scope.user.facebook.pictures : $scope.imageData;

    // console.log($scope.user);
    $scope.filesChanged = function (elm) {
      $scope.files = elm.files;
      $scope.apply();
    };

    $scope.upload = function () {
      var fd = new FormData();
      angular.forEach($scope.files, function (file) {
        fd.append('file', file);
      });

      $http.post('upload', fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }

      }).success(function (data) {
        $scope.imageData = data;
        console.log($scope.imageData);
      });
    };
  })
  .directive('fileInput', ['$parse',
    function ($parse) {
      return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
          elm.bind('change', function () {
            $parse(attrs.fileInput)
              .assign(scope, elm[0].files);
            scope.$apply();
          });
        }
      };
    }
  ]);

html:

<center>
    <h3>Your Profile</h3>
</center>
<h4 class="col-sm-2 sidebar">{{name}} </h4>
<div class="col sm-2 col-sm-offset-2 sidebar" ng-if="user.facebook">
    <img data-ng-src="{{pictures}}">
</div>
<div>

    <br> Change Your Profile Picture:
    <br>
    <form ng-controller="ProfileCtrl">
        <input type="file" file-input="files" multiple />
        <button ng-click="upload()">Upload</button>
        <li ng-repeat="file in files">{{file.name}}
        <img src="data:image/png;base64,{{imageData}}">
        <button ng-click="saveImage()">
            Save New Profile Picture
        </button>
        </li>
    </form>
</div>

In addition to this specific issue, I'm not grasping at a high level what the purpose of the directive is. why couldn't I just ng-repeat with data returned from the '/upload' route in multer?

UPDATE:

thanks to @jontewks, I figured it out. For some reason I declared $scope.imageData = null

in the top of my controller. once I removed that it worked!