Load in new view without removing previous one

My index.html has the following div

<div ng-view></div>

And I have my app declared as follows :

angular.module('app', [])
    .config(['$routeProvider', function($routeProvider){
            $routeProvider
                .when('/listen', {
                    templateUrl : 'partials/listen.html',
                    controller : PlaylistCtrl
                })
                .when('/settings', {
                    templateUrl : 'partials/settings.html',
                    controller : SettingsCtrl
                })
                .otherwise({
                    redirectTo : '/listen'
                })
        }
    ])
;

Now, when I'm at the homepage (i.e. /#/listen), and click on a link to /#/settings, it replaces the contents of the page with the contents from partials/settings.html. How can I modify it so that the contents aren't replaced, but just added on? My goal is to have settings show up in a modal dialog, so I don't want the previous contents of the page to get cleared out.

That's not possible with ng-view. You need to create an own directive and include it in your index.html:

<modal></modal>

Angular-ui has an implementation. Maybe you should check it out.

Edit:

In the past I've made my own modal (when testing out angular). I just started to learn angular, so it has lots of room for improvement (read now i would do it differently). However, it could give you an example:

app.directive('modal', function($compile, $http) {
    return {
        restrict: 'E',
        replace: true,

        compile: function(elm, attrs) {
            var htmlText =
                '<div id="' + attrs.id + '" class="modal hide fade" aria-hidden="true">' +
                    '<div class="modal-header">' +
                        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                        '<p>&nbsp;</p>' +
                    '</div>' +
                    '<div class="modal-body">' +
                        '<div>to be replaced</div>' +
                    '</div>' +
                    '<div class="modal-footer">' +
                        '<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>' +
                    '</div>' +
                '</div>';
            elm.replaceWith(htmlText);

            return function postLink(scope, elm, attrs) {
                var modal = $('#' + attrs.id);
                modal.css({
                    width: '60%',
                    left: '20%',
                    margin: 'auto auto auto auto',
                    top: '10%'
                });
                var modalBody = modal.children('.modal-body');

                modalBody.css({
                    maxHeight: '800px'
                });

                var replaceDiv = modalBody.children();
                $http.get(attrs.src).success(function(data) {
                    var childScope = scope.$new();
                    childScope.modalMode = true;
                    var element = $compile(data)(childScope);
                    angular.element(replaceDiv).replaceWith(element);
                });
            };
        }
    };
});

Html:

<a class="btn" data-target="#myId" data-toggle="modal" data-backdrop="static">Open modal</a>

<modal id="myId" src="path/to/partial" ></modal>

ng-view is not going to help you here.

Instead you should combine ng-include with ng-switch or ng-show.

<div><ng-include src="listen.html"/></div>
<div ng-show="isOnSettingsUrl()"><ng-include src="settings.html"/></div>

Or something along those lines.

In the parent controller you need to read the $routeParams so that you can implement isOnSettingsUrl().

ng-view directly updates itself with the content came from the routeProvider, not only useful, but also increases performance as it unloads the controller and the watchers which you won't be using (you are on a different page).
Also a change in the url should change the view, not append anything. What would happen if I go directly to the page? That definitely won't be intuitive.

It is expected to have a index.html page which includes layout, ng-view which will be the changing page. For other things, you can use ng-include.

In your case, I assume that you want to show a partial page in which user can update their settings.
You don't need to this with routing, you can have the settings partial within the play template and use ng-show on the partial. You then just put a link to show the partial page.

If however, you want something like grooveshark; then you do need to use ng-view with routing to settings, then you should put the play template (and its controller) outside of the ng-view as you expect it to show up in every page.